Twitter bootstrap 同一元素上的Bootstrap 3弹出窗口和工具提示

是否可以在同一元素上使用Bootstrap 3的工具提示和弹出窗口

我有一个表，希望在每一行（tr）上显示一个工具提示。此外，我想在用户单击该行时显示一个弹出窗口。这两个组件都需要“数据切换”属性，因此我怀疑是否可以这样做

---

有人知道这是否可行或是否有解决办法吗？

您可以将工具提示应用于

，并将弹出框应用于所有子

。在javascript中定义属性并将属性附加到相关类中（在本例中为

class=“my popover”

），这样就不必多次写出popover

例如：

视图：

#
名字
姓
用户名
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特

Javascript:

$（文档）.ready（函数（）{
$（“.my popover”）.attr（{“数据切换”：“popover”，“数据容器”：“body”，“数据放置”：“bottom”，“数据内容”：“my popover content”，“数据原始标题”：“popover title”}）；
$（“[数据切换=工具提示]”）。工具提示（）；
$（“[data toggle=popover]”。popover（）；
});

您不必使用

数据切换

，

标题

等等。手动调用引导插件。请参见此示例：

qwertyqwertyqwertyqwerty
qwertyqwertyqwertyqwerty

脚本：

$（'tr'）。每个（函数（）{
$（此）.popover（{
内容：$（this.attr（“popover内容”），
标题：$（this.attr（“popover标题”）
})     
$（此）.tooltip（{
位置：'底部'，
标题：$（this.attr（“工具提示标题”）
})     
})

---

演示小提琴->

我需要在同一元素上同时使用工具提示和popover。工具提示用于在用户悬停时提供信息，弹出框用于在用户单击时显示确认框

在这种情况下，当弹出框出现时，我需要工具提示消失。我在@davidkonrad的解决方案中添加了一些代码，如下所示：

  $(this).popover({    
    content : $(this).attr("popover-content"),
    title : $(this).attr("popover-title")         
  }).tooltip({    
    placement : 'bottom',  
    title : $(this).attr("tooltip-title")         
  }).on('show.bs.popover', function() {
    $(this).tooltip('hide')
  })

---

我不太了解js，-$（document）.ready（function（）做了什么？我从引导层中删除了它，它仍然可以工作，那么，为什么会这样呢？当页面加载时，它调用javascript/jquery。通常需要一些东西来触发脚本（如单击或鼠标悬停），在这种情况下，触发因素是页面加载。可能bootply不需要，它可以由bootply自动加载，我不确定，但最好的做法是将其保留在代码中。我不完全确定，但这不会为每个td创建一个popover吗？当我单击每个td的每个内容时，它不会同时打开4个popover吗？编辑：我对它进行了测试，它完全符合我的想法。遗憾的是，这对我不起作用……欢迎您尝试……是的，这意味着更多的是一种变通方法，而不是一个完美的解决方案。有一种方法可以进一步实现javascript，在弹出窗口处于活动状态时禁用它，但我认为这超出了我的工资等级。对我来说，它只做了一点小改动$（this）.poover（{content:$（this）.attr（“poover content”），title:function（）{return$（this）.attr（“工具提示标题”）；}}）$（this）.tooltip（{placement:'bottom'，title:function（）{return$（this.attr（“poover title”）；}）