如何为 twitter bootstrap popover 设置默认属性值？

Question

如何在twitter bootstrap 2和twitter bootstrap 3中手动设置默认值？

我有以下代码，你可以在选项中看到相同的属性被再次使用（我必须覆盖它们，因为它们需要不同于默认值）。

再次使用的三个属性是triggerplacement和html。

如何覆盖 twitter bootstrap 在我的 javascript 中设置的默认选项？

Javascript （在 DOM 就绪时）

$('.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>

我想要 jQuery 验证器（和其他插件）之类的东西：jQuery.validator.setDefaults()

所以基本上，我如何设置 twitter bootstrap 2 和 twitter bootstrap 3 的引导默认值？代码，如何自定义它，以便默认值是我指定的，而不是 Twitter Bootstrap 2 或 Twitter Bootstrap 3。

Answer 1

引导程序 V2 - View the JSFiddle

您可以使用以下方法记录 defaults 以查看 Bootstrap 2 设置的所有默认值：

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

您可以使用以下命令覆盖 Twitter Bootstrap 2 设置的默认值：

// 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

---

引导程序 V3 - View the JSFiddle

您可以使用以下方法记录 defaults 以查看 Bootstrap 3 设置的所有默认值：

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

您可以使用以下方法覆盖 Twitter Bootstrap 3 设置的默认值：

// 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

---

引导程序 V4 - View the JSFiddle

语法与 Bootstrap 3 略有不同：

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

---

默认值

默认情况下，这些值设置为以下（在 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"

Answer 2

要使用 AngularJS 执行此操作，请参阅：http://angular-ui.github.io/bootstrap/#/tooltip

例如： $tooltipProvider.options({'placement': 'right'})