CODEWITHSUNDEEP
twitter-bootstrap
RayOnAir
RayOnAir

Reputation: 2048

Make Twitter's Bootstrap 2.x Popover use the default Popover title instead of that in the html title attribute?

I have the following anchor element that when clicked should show a Twitter Bootstrap Popover:

<a href="javascript:void(0)" class="popover_toggle" title="View Image">View Image</a>

I also have the following javascript to attach the popover and set a default title for it:

$('.popover_toggle').popover({
    title: 'Login Required!'
});

I would like the Popover to have the default title defined in the javascript "Login Required!", and not the title defined in the anchor element "View Image". How can I achieve that?

Upvotes: 0

Views: 183

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

As http://twitter.github.io/bootstrap/javascript.html#popovers (default title value if title attribute isn't present) tells you: you can only set the title if your element has an empty or none title attribute.

When the title option is set to a string it is evaluated on document ready. Using a function here (evaluate on trigger) still won't work.

Popovers is an extension of the tooltip class. It's constructor calls fixTitle(). fixTitle() moves the content from the title-attribute to the data-orginal-title attribute. Cause this is done before the call to setTitle() you can't use the title function.

To solve your problem overrule the fixTitle() of the popover class:

$.fn.popover.Constructor.prototype.fixTitle = function () { return; }

Now popover will ignore (your title attribute) and use the title you set in your popover call:

html:

   <a href="javascript:void(0);" class="popover_toggle" title="View Image">View Image</a>

javascript:

$.fn.popover.Constructor.prototype.fixTitle = function () {return;}
$('.popover_toggle').popover({
    title: 'Login Required!',
});

See also: http://bootply.com/66591

Upvotes: 1

Related Questions