在javascript或bootstrap中创建可单击的工具提示 [英] Creating a clickable tooltip in javascript or bootstrap

问题描述

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

What is the best way to make a clickable tooltip like the one in the picture below:

我应该使用bootstrap还是其他库？

Should I use bootstrap or some other library?

谢谢。

推荐答案

这里你去了

$("#Pops").popover({
html: true,
content: function () {
    return $('#popover-content').html();
}
});

[data-style=mypops] + .popover {
background: #4194ca;
}
[data-style=mypops] + .popover.bottom .arrow:after {
border-bottom-color: #4194ca;
}
[data-style=mypops] + .popover-content {
}
.popovermenu {
list-style: none;
padding: 0px;
margin: 0px;
}
.popovermenu li {
}
.popovermenu li a {
color: #fff;
}

<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.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="col-sm-4">
    <button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-style="mypops" id="Pops">Click Me</button>
    <div id="popover-content" class="hide">
      <ul class="popovermenu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
</div>

编辑：

• 在弹出按钮中添加自定义 data-style =mypops并添加css因此可以自定义popover而不影响bootstrap中的默认弹出窗口。


• 用<$ c $替换 data-trigger =click c> data-trigger =focus在popover按钮中，如果点击一个链接或弹出窗口外，popover将自动关闭。

• Added custom data-style="mypops" in popover button and add in css so popover can be customized without effecting the default popover in bootstrap.
• Replaced data-trigger="click" with data-trigger="focus" in popover button so if click one a link or outside the popover window, popover will be auto closed.

小提琴

这篇关于在javascript或bootstrap中创建可单击的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！