javascript - Bootstrap tooltip 和 popover 在同一个元素上

Question

我正在尝试在同一元素(glyphicon-plus)上应用 Bootstrap 弹出窗口和工具提示。它不起作用。

<a href ="#"><span class = "pull-right glyphicon glyphicon-plus" tooltip-title = "Save a bookmark" popover-title = "Save your bookmarks here" popover-content = "abc"></span></a>

Javascript:

$(document).ready(function() {
  $(this).popover({ 

    content : $(this).attr("popover-content"),

    title : $(this).attr("popover-title")         
  })   

  $(this).tooltip({  

    placement : 'bottom', 

    title : $(this).attr("tooltip-title")         
  });     
});

有人可以指导正确的方法吗？

Answer 1

假设我们有两个独立的 HTML 元素 <a>和 <span>为什么不放置 tooltip在一个和popover触发另一个？当然，您还需要初始化两者:

https://getbootstrap.com/docs/3.3/javascript/#tooltips

您在此处使用的两个 JavaScript 组件是可选的，并且您的上述代码缺少任何允许它们加载的初始化。

$(function () {
  $('[data-toggle="tooltip"]').tooltip({ 
    container: 'body', 
    html: false 
  });
  
  $('[data-toggle="popover"]').popover({ 
    container: 'body', 
    html: false  
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<a href="#" data-toggle="tooltip" title="Save a Bookmark" data-placement="right">
  <span class="glyphicon glyphicon-plus" data-toggle="popover" data-placement="right" title="Save your bookmarks here" data-content="abc"></span>
</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

您还应该指定 container用于正确定位和对齐，以及是否要在其中任何一个中允许使用 HTML(在我的示例中我已将其设置为 false)。

另请注意，此解决方案允许您使用 data-placement用于定位，因此您无需限制自己使用相同位置的所有工具提示或弹出窗口。由于我们已将触发器分成不同的元素，您无需担心创建自定义数据属性，从中提取标题或内容等内容。您只是在使用标准的 Bootstrap 属性。