Help / information balloon [duplicate]

Question

Help / information balloon [duplicate]

Navigation

#1 by (4 votes)
#2 by (4 votes)

2

I'd like to know, basically, how to make these balloons that appear when we hover over the icon:

It can appear anywhere on the correct screen!?
But how do you align it with the icon?

javascript html

asked by anonymous 05.07.2018 / 15:01

2 answers

4

Use tooltip already included in Bootstrap, see documentation . Use the data-placement attribute to set the position of the hint at the top, bottom, left, or right side of the element:

Tip: You can also use the data-placement attribute with an "auto" value, which will allow the browser to decide the position of the tooltip. For example, if the value is "auto left", the tooltip will be displayed on the left side when possible, otherwise to the right. Source: link

$('[data-toggle="tooltip"]').tooltip();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title="Atenção!"></i>

05.07.2018 / 15:14

How to search for an exact word with the grep command How to mount JSON with a list of stores separated by categories?

score 4 · Accepted Answer

If you are using bootstrap , follow the Netinho Santos answer, if you are not using it, you can create and style with CSS

p {
  text-align: center;
  margin-top: 50px;
  font-size: 30px;
  font-weight: bold;
}

p:hover ~ span {
  display: block;
}

span {
  display: none;
  color: #fff;
  background-color: red;
  width: 13%;
  padding: 10px;
  border-radius: 4px;
  position: relative;
  top: -100px;
  left: 60%;
}

<p>TEXTO</p>

<span>Informações</span>