我还能在 Bootstrap 弹出框上使用“标题”属性吗？答案

【问题标题】：Can I still use the 'title' attribute on Bootstrap popovers?我还能在 Bootstrap 弹出框上使用“标题”属性吗？
【发布时间】：2014-12-02 04:49:27
【问题描述】：

我正在尝试在激活 Bootstrap 弹出框的链接上使用“标题”属性，但实际上并未将其添加到弹出框本身。

基本上，我为激活它们的链接使用图标，但是当我添加“标题”标签时，它不会使用通常会弹出带有标题的东西的工具提示。

我已经做了很多谷歌搜索，但我还没有找到一种在使用时仍将标题标签用作工具提示的方法。

如果我必须更改为弹出框的另一个库，那很好，但如果我不必这样做，我宁愿不这样做。

提前感谢您的帮助！

这里有一些代码来说明我的意思。

 <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 属性，它会自动添加到 popover 并完全跳过工具提示。但是第三个不使用弹出框，仍然允许像平常一样使用标题标签。

【问题讨论】：

标签： jquery html twitter-bootstrap

【解决方案1】：

当您初始化工具提示或弹出框（实际上扩展工具提示，如果您查看the code）时，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 选项，它可以让您将弹出框绑定到后代：

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

我相信这段代码可以达到你想要的效果。

【讨论】：