Menu
I have a div tag like this:
<div> <label>Name</label> <input type="text"/> </div> How can I displaying a tooltip on :hover of the div, preferably with a fade in/out effect.
569
The only thing you have to do is set an attribute on any div called "data-tooltip" and that text will be displayed next to it when you hover over it.
One can set a position to that tool tipped text by using CSS, which helps us to define some style and position to our tooltip. Using a tooltip to our WebPages is helps us do more interaction with the user because it gives short information of included elements.
Usage. Via data attributes − To add a tooltip, add data-toggle = "tooltip" to an anchor tag. The title of the anchor will be the text of a tooltip. By default, tooltip is set to top by the plugin.
You can also control the position of the custom tooltip using the data-tooltip-position attribute (accepted values: top / right / bottom / left ). For instance, the following will add a tooltop positioned at the bottom of the span element.
For the basic tooltip, you want:
<div title="This is my tooltip"> like:
.visible { height: 3em; width: 10em; background: yellow; }<div title="This is my tooltip" class="visible"></div>For a fancier javascript version, you can look into:
https://jqueryhouse.com/best-jquery-tooltip-plugins/
The above link gives you 25 options for tooltips.
142
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
