jquery tooltip from html title attribute

Question

I've been trying jQuery Tooltip from Bootstrap, which requires quite a few extra attributes:

<a rel="tooltip" data-placement="right" data-original-title="Hello" href="#">Tooltip Example</a>

There seems to be a bit of a problem with this though, because I use rel="nofollow" on quite a few URLs I want to use tooltip on, and it doesn't let me use both at once.

Even more important, I want an elegant fallback for users that don't have JavaScript enabled browsers.

I want to know if there's a way I can have jQuery Tooltip treat title="" attribute as data-original-title, and have a default preset for data-placement.

Fiddle: http://jsfiddle.net/FhGT3/

ca you please create and share a fiddle of the same on jsfiddle.net? — Sunny Sharma
– Sunny Sharma, Commented Mar 22, 2014 at 10:57
Your markup appears to be from an older version of Bootstrap. The current tooltip plugin only requires two attributes, like this: data-toggle="tooltip" title="Some tooltip text!". And though you don't need it here, it's worth noting that the rel attribute accepts multiple values: stackoverflow.com/questions/1878657/… — peterjmag
– peterjmag, Commented Mar 22, 2014 at 11:02
You could even mimic the tooltip with CSS 3 and only use JS when CSS 3 is not supported ... (modernizr). You can extract the tooltip text [data-original-title] {content: attr(data-original-title); } — JohanVdR
– JohanVdR, Commented Mar 22, 2014 at 11:06
I know rel accepts multiple, but for some reason when I used rel="nofollow tooltip" it didn't work. But is there some way I can have it just treat all content with the title="" attribute as tooltip instead of adding data-toggle="tooltip" as well? — Orange
– Orange, Commented Mar 22, 2014 at 11:07

Sunny Sharma · Accepted Answer · 2014-03-22 11:21:34Z

1

of course there is. you just add title="" and it will pick the text as tooltip.

<a rel="tooltip" data-placement="right" title="my title" 
data-original-title="Hello" href="#">Tooltip Example</a>

Here's a sample:

http://jsfiddle.net/sunnykumar08/FhGT3/4/

Also for your second question: Yes, you can set a default preset for data-placement. You just need to specify "data-placement:'

Thanks!

edited Mar 22, 2014 at 11:21

answered Mar 22, 2014 at 11:08

Sunny Sharma

5,0045 gold badges41 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Orange Over a year ago

I meant, is there a way the script can be modified to set a default data-placement, and have it interpret title="" as data-original-title="". I'd like to omit the attributes.

Orange Over a year ago

I want to exclude the rel="" as well. Could something like this work: function showtooltip() { $('a[title="*"]').tooltip({ Like a wildcard for all hyperlinks with title attribute?

Sunny Sharma Over a year ago

yes, just use a[title] as selector and that's all you need! fiddle updated.

Victory · Accepted Answer · 2014-03-22 11:07:21Z

0

You can call tool tips directly. Lets say you give all the <a> tags you want to have tool tips a class runtooltip

<a href="runtooltip" class="runtooltip" rel="nofolow" title="My Tip!">Something</a>

just before the </body> you have

<script>
$('.runtooltip').each(function () {
    var $this = $(this); 
    var options = {
        placement: 'top'
    }
    $this.tooltip();
});
</script>

you can see the jsfiddle here http://jsfiddle.net/8gQ7L/

answered Mar 22, 2014 at 11:07

Victory

5,9113 gold badges28 silver badges47 bronze badges

Collectives™ on Stack Overflow

jquery tooltip from html title attribute

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related