Help / information balloon [duplicate]

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?

asked by anonymous 05.07.2018 / 15:01

2 answers

4

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>
    
05.07.2018 / 15:32
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