Question

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

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

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

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

提前感谢您的帮助！

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

 <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并完全跳过工具提示。但是第三个不使用popover并且仍然允许使用标题标签，就像正常一样。

Answer 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选项，它允许你将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>

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

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

1 个答案: