How to put keywords on my site pages

Question

I’m a beginner and I don’t know what it’s called... I would like some explanations/word definitions/terms on some words on my website. Type the user hovers over the word and opens a tooltip type with the definition/explanation. What do you call it? What do you call it? Is there a "framework" ready for it?

Answer 1

You can use the Tooltip jQuery UI Widget. It is simple to use and you can customize as you want.

What do you need?

Only upload jQuery libraries and jQuery UI to your page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="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>

Start the plugin:

<script>
$(function(){
   $(document).tooltip();
});
</script>

And then add the attribute title="texto do tooltip" in any element where you want the balloonball when passing the mouse.

In the example below, I added the title in the tags <b> and <strong> (bold). But you can also put in any text, just put the text between <span></span> and add title in the span. Hover your mouse 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>
<link rel="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>Lorem ipsum <b title="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">

Answer 2

If you want something simple you can use the tag <abbr> of HTML:

Site <abbr title="pt.stackoverflow.com">StackOverflow</abbr> em portugês