更改引导工具提示的样式答案

【问题标题】：Change style of bootstrap tooltip更改引导工具提示的样式
【发布时间】：2019-07-09 16:15:11
【问题描述】：

我在表格中添加了评论按钮。当我将鼠标悬停时，将显示工具提示。
如何更改工具提示的样式？谁能帮帮我？

.tooltip-arrow,
.cancelComments + .tooltip > .tooltip-inner {background-color: #f00;}

https://jsfiddle.net/5h1ybdp1/3/

我也尝试使用popover，但没有显示弹出框。

【问题讨论】：

stackoverflow.com/questions/15383440/… 和 stackoverflow.com/questions/17642447/… 可能重复

标签： css twitter-bootstrap

【解决方案1】：

这里是简单的例子

HTML

  <a href="#" data-toggle="tooltip" data-placement="bottom"
       title="" data-original-title="Tooltip on bottom"
       class="red-tooltip">Tooltip on bottom</a>

CSS

.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#f00; }

http://jsfiddle.net/technotarek/2htZe/

这里正在修改你的代码，你没有引用 bootstrap.js 的问题！

https://jsfiddle.net/5h1ybdp1/7/

【讨论】：

您是否仔细检查过您是否以正确的方式引用了引导文件？因为我认为这段代码应该可以工作。此外，也许指向this post 的链接可以为您清除问题。

【解决方案2】：

好吧，你应该编写一个脚本来生成如下的工具提示，并且你没有包括bootstrap.min.js、jquery和bootstrap.min.js，包括顺序也很重要。这将解决您的问题，这是您更新的小提琴https://jsfiddle.net/8q88jrtr/6/

$(document).ready(function(){
    $("i").tooltip();
});

【讨论】：

【解决方案3】：

Change Markup adding title and content in bootstrap-3  tool-tip

//在引导js、css和jquery资源后的页脚或页眉中添加此脚本

    <script>
            $(document).ready(function () {
                //tooltip added on attribute "data-toggle"
                $('[data-toggle="tooltip"]').tooltip();
                $(".tooltipControl").popover({ trigger: "hover" });
</script>

HTML

<a links tooltipControl" data-content="No Detail" data-placement="right" data-original-title="Title">See tooltip Here</a>

【讨论】：

【解决方案4】：

<!-- CSS -->
<style>
a i{margin:50px 0 0 50px;}
#my-tooltip + .tooltip > .tooltip-inner {background-color:#EF5438;}
#my-tooltip + .tooltip > .tooltip-arrow {border-top:5px solid #EF5438;}
</style>
<!-- HTML -->
<a href="#" data-toggle="tooltip" data-placement="top" title="Ur 
Facebook" id="my-tooltip"><i class="fa fa-facebook"></i></a>

【讨论】：

您应该解释一下这段代码的作用。请同时应用正确的格式。