Placing keywords on my site pages

1

I am a beginner and I do not know what his name is ... I wanted some explanations / definitions of words / terms in some words of my site. Type the user hover the mouse over the word and open type a tooltip with the definition / explanation. Has as? What's the name? Is there a framework ready for this?

    
asked by anonymous 04.03.2018 / 21:58

2 answers

1

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">
    
04.03.2018 / 23:35
0

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

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