在javascript或引导程序中创建可单击的工具提示

制作如下图所示的可单击工具提示的最佳方法是什么：

我应该使用bootstrap还是其他库

---

谢谢。

您可以使用Bootstrap的弹出窗口，并使用模板选项在工具提示中包含可单击的链接。还有关于工具提示位置的选项

$(function (){
    $("#example").popover({
        template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
        placement: 'right'
    });  
});

$（函数（）{
$（“#示例”）.popover({
模板：“”，
位置：'对'
});  
});

给你

$（“Pops”）.popover({
是的，
内容：功能（）{
返回$（'#popover content'）.html（）；
}
});
[data style=mypops]+.popover{
背景#4194ca；
}
[data style=mypops]+.popover.bottom.arrow:after{
边框底色：#4194ca；
}
[数据样式=mypops]+.popover内容{
}
.popovermenu{
列表样式：无；
填充：0px；
边际：0px；
}
李先生{
}
李安先生{
颜色：#fff；
}

点击我






$（'[data toggle=“popover”]'）.popover（{trigger:“manual”，html:true，animation:false}）
.on（“mouseenter”，函数（）{
var_this=这个；
$（此）.popover（“显示”）；
$（“.popover”）.on（“mouseleave”，函数（）{
$（_this.popover（'hide'）；
});
}).on（“mouseleave”，函数（）{
var_this=这个；
setTimeout（函数（）{
如果（！$（“.popover:hover”）.length）{
$（_this）.popover（“隐藏”）；
}
}, 300);
});

引导示例
爆米花示例
“数据原始标题=“测试标题”>测试链接
bootstrap很酷：bootstrap的弹出框甚至更好：你能扩展一下你希望小部件做什么吗？我想在Postsecondary div上出现一个悬停事件或单击事件，然后出现蓝色的弹出框/工具提示。然后学生或教员也可以单击。最后，如果你不悬停在蓝色部分，它会消失。你怎么做样式不是这样的吗？我的副本只是显示了列表如果你使用了与answer相同的代码，应该不会有问题，除非你对它做了任何更改，或者你没有使用引导框架，你能提供一个快照吗？MouseLeave中的计时器做什么？@geneb检查指针是否在300毫秒后在工具提示内，如果不是，那么我想工具提示是隐藏的