You can use the Tooltip Widget for jQuery UI . It's simple to use and you can customize it as you like.
What do you need?
Just load the jQuery libraries and the jQuery UI into your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><linkrel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Starttheplugin:
<script>$(function(){$(document).tooltip();});</script>
Andthenaddthetitle="texto do tooltip"
attribute to any element where you want the balloon to appear when hovering.
In the example below, I've added title
to <b>
and <strong>
(bold) tags. But you can also put in any text, just put the text between <span></span>
and add title
in span
. Hover over them to see the effect:
$(function(){
$(document).tooltip();
});
span{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><p>Loremipsum<btitle="Tooltip deste texto">dolor sit amet</b>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <strong title="Tooltip para este texto">laboris nisi ut aliquip</strong> ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span title="Explicaçãono tooltip">Excepteur sint occaecat</span> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<input type="text" title="Tooltip no input" placeholder="Passe o mouse">