twitter-bootstrap 更改引导工具提示的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43841697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change style of bootstrap tooltip
提问by user7397787
I have added comment button in my table.When I hover it tooltip will be displayed.
How to change style of tooltips? Can anyone help me?
我在我的表格中添加了评论按钮。当我悬停它时，将显示工具提示。
如何更改工具提示的样式？谁能帮我？
.tooltip-arrow,
.cancelComments + .tooltip > .tooltip-inner {background-color: #f00;}
https://jsfiddle.net/5h1ybdp1/3/
https://jsfiddle.net/5h1ybdp1/3/
I tried using popoveralso but popover is not displaying.
我popover也尝试使用，但没有显示弹出窗口。
回答by Miomir Dancevic
Here are simple example
这是简单的例子
HTML
HTML
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="" data-original-title="Tooltip on bottom"
class="red-tooltip">Tooltip on bottom</a>
CSS
CSS
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#f00; }
http://jsfiddle.net/technotarek/2htZe/
http://jsfiddle.net/technotarek/2htZe/
Here is working fiddle with your code, the problem you didnt reference bootstrap.js!
这里正在处理您的代码，您没有引用 bootstrap.js 的问题！
回答by this.girish
Well, you supposed to write a script in order to generate a tool tip as follows and you haven't include bootstrap.min.js, jqueryand bootstrap.min.jsincluding order is also important. This will resolve your issue here is your updated fiddle https://jsfiddle.net/8q88jrtr/6/
好吧，您应该编写一个脚本来生成如下的工具提示，而您还没有包含bootstrap.min.js，jquery并且bootstrap.min.js包含顺序也很重要。这将解决您的问题，这里是您更新的小提琴https://jsfiddle.net/8q88jrtr/6/
$(document).ready(function(){
$("i").tooltip();
});
回答by sam
<!-- 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>
回答by Super Model
Change Markup adding title and content in bootstrap-3 tool-tip
//add this script in footer or header after bootstrap js, css and jquery resources
// 在 bootstrap js、css 和 jquery 资源之后的页脚或页眉中添加此脚本
<script>
$(document).ready(function () {
//tooltip added on attribute "data-toggle"
$('[data-toggle="tooltip"]').tooltip();
$(".tooltipControl").popover({ trigger: "hover" });
</script>
Html
html
<a links tooltipControl" data-content="No Detail" data-placement="right" data-original-title="Title">See tooltip Here</a>
