Menu
There are two ways you can create a hover text for your HTML elements: Adding the global title attribute for your HTML tags. Creating a tooltip CSS effect using :before selector.
HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse over this <div>, it will show the tooltip text. The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" .
The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
Use the title attribute, for example:
<div title="them's hoverin' words">hover me</div>or:
<span title="them's hoverin' words">hover me</span>The title attribute also works well with other html elements, for example a link...
<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>
Often i reach for the abbreviation html tag in this situation.
<abbr title="Hover">Text</abbr>
https://www.w3schools.com/tags/tag_abbr.asp
You're looking for tooltip
For the basic tooltip, you want:
<div title="This is my tooltip">
For a fancier javascript version, you can look into:
http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632
The above link gives you 12 options for tooltips.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With