CODEWITHSUNDEEP
htmlcsstooltip
user244394
user244394

Reputation: 13448

How to add tooltip to a non hyperlink HTML tag

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 not based on a hyperlink

Thanks

Upvotes: 5

Views: 10800

Answers (3)

Matt Gibson
Matt Gibson

Reputation: 14949

<span title="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 :)

Upvotes: 1

Curtis
Curtis

Reputation: 103358

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

<span title="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/

Upvotes: 10

Joe
Joe

Reputation: 6416

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/

Upvotes: 1

Related Questions