我还可以在Bootstrap popovers上使用'title'属性吗？

Question

我试图在激活Bootstrap popovers的链接上使用'title'属性,而不会实际添加到popover本身.

基本上,我使用图标作为激活它们的链接,但是当我添加'title'标签时,它不会使用工具提示,它通常会弹出附加了标题的东西.

我已经做了很多谷歌搜索,但我还没有找到一种方法,使用它时仍然使用标题标记作为工具提示.

如果我必须换到另一个图书馆换宿首,那很好,但如果我不需要,我宁愿不去.

在此先感谢您的帮助!

这里有一些代码来展示我的意思.

 <a class="icons-extras-small small-icon float-right" href="#" data-toggle="popover" title="More Options"></a>

 <a class="icons-status-small small-icon float-right" href="#" data-toggle="popover" title="Set Status"></a>

 <a class="icons-tag-small small-icon float-right tweet_edit_tags_link" id="{{tweet.id}}_edit_tags_link" href="#tags-modal" data-toggle="modal" title="Add Tags"></a>

您可以看到前两个使用popover和title属性,该属性会自动添加到弹出窗口并完全跳过工具提示.但第三个不使用弹出窗口仍然允许使用标题标签像平常一样.

Answer 1

当您初始化工具提示或弹出窗口(实际上扩展工具提示时,如果您查看代码),Bootstrap会将title属性的内容放入data-original-title并清除前者:

Tooltip.prototype.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', '')
  }
}

现在让我们看看selector选项,它允许您将popovers绑定到后代:

<ul title="Title" data-toggle="popover" data-selector="li > a" data-content="Content">
    <li><a href="#" title="First">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
</ul>

运行此示例时,您会注意到数据属性是继承的,但标题却没有.

$('[data-toggle="popover"]').popover();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<ul title="Title" data-toggle="popover" data-selector="li > a" data-content="Content">
    <li><a href="#" title="First">Test 1</a></li>
    <li><a href="#">Test 2</a></li>    
</ul>

现在,我找到了一种方法来滥用这种行为,通过设置data-selector="true"似乎将事件绑定到具有此属性本身的元素(说实话,我不确定这种行为背后的原因是什么):

<a href="#" title="Real Title" data-toggle="popover" data-selector="true" data-title="Popover Title" data-content="Content">Test</a>

$('[data-toggle="popover"]').popover();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<a href="#" title="Real Title" data-toggle="popover" data-selector="true" data-title="Popover Title" data-content="Content">Test</a>

我相信这段代码可以实现您想要实现的目标.