为什么 html title 属性和 twitter bootstrap data-original-title 互斥？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15487562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is html title attribute and twitter bootstrap data-original-title mutually exclusive?
提问by keruilin
I have an HTML div element that when clicked displays a twitter bootstrap popover. Current code looks like this:
我有一个 HTML div 元素，单击该元素时会显示一个 twitter bootstrap 弹出窗口。当前代码如下所示：
<div class="popover" title="supplementary info about html element"
data-original-title="popover title" data-content="popover content...">
</div>
$(document).on('ready', function() {
App.Utils.Popover.enableAll();
});
App.Utils.Popover = {
enableAll: function() {
$('.popover').popover(
{
trigger: 'click',
html : true,
container: 'body',
placement: 'right'
}
);
};
Problem is that twitter bootstrap takes the title attribute value and displays that as the title of the popup instead of using data-original-title. Any way to make the two work together as intended?
问题是 twitter 引导程序采用 title 属性值并将其显示为弹出窗口的标题，而不是使用 data-original-title。有什么方法可以让两者按预期一起工作？
采纳答案by hajpoj
This is because the popover javascript extends the tooltip javascript, and the tooltip javascript was (i believe) intended to replace the default tooltip that is set by the title attribute.
这是因为 popover javascript 扩展了工具提示 javascript，并且工具提示 javascript 是（我相信）旨在替换由 title 属性设置的默认工具提示。
This code is the culprit (in bootstrap-tooltip.js, like 253ish)
这段代码是罪魁祸首（在 bootstrap-tooltip.js 中，如 253ish）
, fixTitle: function () {
var $e = this.$element
if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
$e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
}
}
Where if there is a title attribute then the data-original-title attribute is replaced by the title attribute.
如果有 title 属性，则 data-original-title 属性将替换为 title 属性。
EditBasically my answer would be there is no easy way. You would have to mod the bootstrap js a bit though I wouldn't really recommend that in this case. Maybe use an older version of the bootstrap popover that might not have that code in there?
编辑基本上我的答案是没有简单的方法。尽管在这种情况下我真的不建议这样做，但您必须稍微修改 bootstrap js。也许使用旧版本的引导程序弹出窗口，那里可能没有该代码？
回答by Sonata
I had the same problem and wasn't able to use a different Bootstrap version, so I decided to inject my function into the popover prototype. Do not try this at home:
我遇到了同样的问题并且无法使用不同的 Bootstrap 版本，所以我决定将我的函数注入到 popover 原型中。不要在家里尝试这个：
<script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
<script type="text/javascript">
// dirty hack
$.fn.popover.Constructor.prototype.fixTitle = function () {};
</script>
Now you can add a title for the popover and a title for the browsers mouseover:
现在，您可以为弹出窗口添加标题，并为浏览器鼠标悬停添加标题：
<i data-placement="bottom" data-trigger="click"
bs-popover="'views/partials/notifications.html'" data-html="true"
data-unique="1"
data-original-title="This title will be used by the popover"
title="This title will be used by a browser for a mouseover"
/>
