Question

我正在尝试在同一元素（glyphicon-plus）上应用bootstrap popover和tooltip。它无法正常工作。

<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组件是选择加入，并且您的上述代码缺少任何允许它们加载的初始化。

＆＃13;

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

＆＃13;

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

＆＃13;

您还应指定container以获得正确的定位和对齐方式，以及是否要允许其中的HTML（我在示例中将其设置为false）。

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

Bootstrap工具提示和弹出在同一元素上

1 个答案: