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, Mar 22 '14 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: http://stackoverflow.com/questions/1878657/multiple-values-for-rel-attribute — peterjmag, Mar 22 '14 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, Mar 22 '14 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, Mar 22 '14 at 11:07

Sunny Sharma · Accepted Answer · 2014-03-22T11:21:34.030

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 '14 at 11:21

answered Mar 22 '14 at 11:08

Sunny Sharma

4,688
5
35
73

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 Mar 22 '14 at 11:10
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? – Orange Mar 22 '14 at 11:16
yes, just use **a[title]** as selector and that's all you need! fiddle updated. – Sunny Sharma Mar 22 '14 at 11:21

score 0 · Answer 2 · answered Mar 22 '14 at 11:07

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/

jquery tooltip from html title attribute

2 Answers2