How can I set default property values for twitter bootstrap popover?
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"
For doing this with AngularJS refer to: http://angular-ui.github.io/bootstrap/#/tooltip
E.g.:
$tooltipProvider.options({'placement': 'right'})