CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Orange
Orange

Reputation: 19

jquery tooltip from html title attribute

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/

Upvotes: 0

Views: 4095

Answers (2)

Sunny Sharma
Sunny Sharma

Reputation: 4934

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!

Upvotes: 1

Victory
Victory

Reputation: 5890

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/

Upvotes: 0

Related Questions