Menu
What is the easiest, cleanest way to create an HTML mouseover tool tip without using JavaScript?
<img id=Pennstate src="/blah" style="cursor:pointer;"> mouse over that and have a a nice tooltip "We are Pennstate!"
485
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" .
Tooltips display text (or other content) when you hover over an HTML element. The w3-tooltip class defines the element to hover over (the tooltip container). The w3-text class defines the tooltip text.
So open Userpilot and go to the “Native Tooltips” section. At the top-right, you'll see a magenta button saying “Create a New Native Tooltip.” Click on that button, and specify the page on your website that you want the tooltip on.
The easiest way is to use the native HTML title attribute:
<img src="https://stackoverflow.com/favicon.ico" style="cursor:pointer;" title="Stack Overflow">But if you need more, try the tooltip widget provided by jQuery UI since version 1.9.
199
If you don't care much what the tooltip looks like you can always just use the "title" attribute
39
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
