8

How to set the default value manually in twitter bootstrap 2 and twitter bootstrap 3?

I have the following code, you can see the same properties in the options being used over again (I have to overwrite them because they are required to be different from the defaults).

The three properties that are used over again are trigger placement & html.

How I can override the default options set by twitter bootstrap in my javascript?

Javascript (On DOM Ready)

$('.pop1').popover({
    trigger: 'hover',
    placement : 'right',
    html: true, // used once (and the 2 above)
    title : 'My title for popover1',
    content : 'My content with popover1'
});

$('.pop2').popover({
    trigger: 'hover', //used again
    placement : 'right',
    html: true,
    title : 'My title for popover2',
    content : 'My content with popover2'
});

$('.pop3').popover({
    trigger: 'hover', //and again!
    placement : 'right',
    html: true,
    title : 'My title for popover3',
    content : 'My content with popover3'
});

HTML:

<span class="pop1"><i class="icon-info-sign"></i></span>
<span class="pop2"><i class="icon-info-sign"></i></span>
<span class="pop3"><i class="icon-info-sign"></i></span>

I wanted something like jQuery validators (& other plugins): jQuery.validator.setDefaults()

So basically, how can I set the bootstrap default values for twitter bootstrap 2 and twitter bootstrap 3?, I would like it so bootstrap uses my custom default values so I don't have to override them over and over again throughout my code, How can I customize it so the default value is one specified by me and not Twitter Bootstrap 2 or Twitter Bootstrap 3.

4

2 回答 2

22

Bootstrap V2 - View the JSFiddle

You can log the defaults to see all the defaults set by Bootstrap 2 using:

console.log($.fn.popover.defaults); // Log default values to the console

You can override the defaults set by Twitter Bootstrap 2 using the following:

// Make sure jQuery is loaded before trying to override the defaults!
$.fn.popover.defaults.trigger = 'hover';   // Set the default trigger to hover
$.fn.popover.defaults.placement = 'right'; // Set the default placement to right
$.fn.popover.defaults.html = true;         // Set the default html (parse html) to true

View the JSFiddle here

Bootstrap V3 - View the JSFiddle

You can log the defaults to see all the defaults set by Bootstrap 3 using:

console.log($.fn.popover.Constructor.DEFAULTS); // Log default values to the console

You can override the defaults set by Twitter Bootstrap 3 using the following:

// Make sure jQuery is loaded before trying to override the defaults!
$.fn.popover.Constructor.DEFAULTS.trigger = 'hover';   // Set the default trigger to hover
$.fn.popover.Constructor.DEFAULTS.placement = 'right'; // Set the default placement to right
$.fn.popover.Constructor.DEFAULTS.html = true;         // Set the default html (parse html) to true

View the JSFiddle here

Bootstrap V4 - View the JSFiddle

The syntax varies slightly from Bootstrap 3:

$.fn.popover.Constructor.Default.html = true;

Default Values

By default the values are set to the following (they are the same in Boostrap 2 & 3):

animation: true
container: false
content: ""
delay: 0
html: false
placement: "right"
selector: false
template: "<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>"
title: ""
trigger: "hover"
于 2013-07-11T09:08:16.123 回答
2

For doing this with AngularJS refer to: http://angular-ui.github.io/bootstrap/#/tooltip

E.g.: $tooltipProvider.options({'placement': 'right'})

于 2014-06-06T08:07:33.000 回答