Aid balloon/information

Question

I would like to know, basically, how do these balloons appear when we hover above the icon:

• It can appear at any position of the correct screen!?

• But how to align it with the icon?

Answer 1

Utilize tooltip already included in Bootstrap, see documentation. Use the attribute data-placement to set the tip position on 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 tool tip position. For example, if the value is "auto left", the tooltip will be displayed on the left side when possible, otherwise on the right. Source: https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

$('[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>
<script src="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>

Answer 2

If you are using bootstrap follow the reply of Netinho Santos, if not using can create and stylize with CSS even.

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>