Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Tooltip

How To Add Tooltip To A Non Hyperlink Html Tag

Post a Comment
Is there anyways to add tooltips to a non hyper link? ie . I want to have a mouse over tooltip when it goes over a text I would appreciate a working example of tooltip that is no

Solution 1:

If by tooltip you mean the title attribute, you can apply that to a lot of different HTML elements. For example span:

<spantitle="This is my tooltip">roll over me!</span>​

http://jsfiddle.net/Curt/cBHf7/

However if you're referring to javascript tooltips, then these can also be applied to elements other than the anchor:

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Solution 2:

There are many jQuery plugins that will accommodate this behavior. You can tooltip on jQuery selectors. Or just use the "title" attribute.

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Solution 3: 

<spantitle="this is the tooltip">Text user will see on page goes here</span>

You can add a title attribute to almost all HTML tags like this, apart from <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>. More info from W3Schools here.

There are various JavaScript options available, the advantage of which is that you can alter the syling e.g. make the tooltip bigger, or add line breaks in the text. The downside is that it's more complex to implement and might impact on page responsiveness if you have lots. Your call :)

Post a Comment for "How To Add Tooltip To A Non Hyperlink Html Tag"