不同样式的Bootstrap工具提示
[英]Bootstrap Tooltips with different styles
问题描述
我有一些工具提示显示像这样使用数据切换
<i class="fa fa-fire fa-lg" data-toggle="tooltip" data-placement="bottom" title="Fire Place"></i>
我在这里使用了样式化的工具提示，
.tooltip > .tooltip-inner {
padding: 15px;
font-size: 120%;
background-color: #FFEB6C;
color: #374D40;}
我希望不同地方的工具提示看起来像背景颜色一样。 即我想要多种外观的工具提示。 但我看不到如何为每个工具提示设置自定义工具提示样式。 我也不能为每个工具提示设置一个CSS类，因为没有这样的元素，我通过数据切换来设置工具提示。
有什么办法可以使这项工作吗？ 谢谢。
4 个解决方案
解决方案1
4 2017-05-08 20:17:27
很简单，我创建了一个类来保存这些CSS样式，称为custom-tooltip ：
/* Tooltip */
.custom-tooltip+.tooltip>.tooltip-inner {
padding: 15px;
font-size: 1.2em;
background-color: #FFEB6C;
color: #374D40;
}
/* Tooltip on bottom */
.custom-tooltip+.tooltip.bottom>.tooltip-arrow {
border-bottom: 5px solid #FFEB6C;
}
$('i[data-toggle="tooltip"]').tooltip({ animated: 'fade', placement: 'bottom' });
/* Tooltip */ .custom-tooltip+.tooltip>.tooltip-inner { padding: 15px; font-size: 1.2em; background-color: #FFEB6C; color: #374D40; } /* Tooltip on top */ .custom-tooltip+.tooltip.top>.tooltip-arrow { border-top: 5px solid #FFEB6C; } /* Tooltip on bottom */ .custom-tooltip+.tooltip.bottom>.tooltip-arrow { border-bottom: 5px solid #FFEB6C; } /* Tooltip on left */ .custom-tooltip+.tooltip.left>.tooltip-arrow { border-left: 5px solid #FFEB6C; } /* Tooltip on right */ .custom-tooltip+.tooltip.right>.tooltip-arrow { border-right: 5px solid #FFEB6C; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <i class="fa fa-fire fa-lg custom-tooltip" data-toggle="tooltip" data-placement="bottom" title="Fire Place"></i>
解决方案2
1 2018-06-10 20:24:04
我为bootstrap 3工具提示的样式和动态创建的元素一起准备了一个非常通用的解决方案。 如果生成的工具提示不是其元素的同级而是在更高级别的DOM上（例如，使用了自定义container选项时），它也将起作用：
<body>
<div>
<button type="button" class="btn btn-default" data-container="body" title="Tooltip text">Hover over me</button>
</div>
</body>
工具提示的<div>将在其中生成为<div>的同级，而不是<button> 。
解
让我们将Bootstrap工具提示对象的模板选项设为动态：
$.fn.tooltip.Constructor.prototype.tip = function () {
var template;
var $e = this.$element;
var o = this.options;
if (!this.$tip) {
template = typeof o.template == 'function' ? o.template.call($e[0]) : o.template;
this.$tip = $(template);
if (this.$tip.length != 1) {
throw new Error(this.type + ' `template` option must consist of exactly 1 top-level element!');
}
}
return this.$tip;
}
准备工具提示模板功能。 它将从带有工具提示的元素中获取所有“工具提示-*”类，并将其追加到“工具提示箭头”和“工具提示内部” div
tooltipTemplate = function () {
var classList = ($(this).attr('class')||"").split(/\s+/);
var filterTooltipPrefix = function(val){
return val.startsWith('tooltip-');
};
var tooltipClasses = classList.filter(filterTooltipPrefix).join(' ');
return '<div class="tooltip" role="tooltip"><div class="tooltip-arrow ' + tooltipClasses +'"></div><div class="tooltip-inner ' + tooltipClasses +'"></div></div>';
}
确保我们的功能在较旧的浏览器中有效：
if (!String.prototype.startsWith) {
String.prototype.startsWith = function(searchString, position){
position = position || 0;
return this.substr(position, searchString.length) === searchString;
};
}
现在启用工具提示：
$('body').tooltip({
selector: "[title]",
html: true,
template: tooltipTemplate
});
例：
HTML
<h1>Test tooltip styling</h1>
<div><span title="Long-long-long tooltip doesn't fit the single line">Hover over me 1</span></div>
<div><span class="tooltip-left" data-container="body" title="Example (left aligned):<br>Tooltip doesn't fit the single line, and is not a sibling">Hover over me 2</span></div>
<div><span class="tooltip-large tooltip-left" title="Example (left aligned):<br>This long text we want to have in the single line">Hover over me 3</span></div>
CSS
.tooltip-inner.tooltip-large {
max-width: 300px;
}
.tooltip-inner.tooltip-left {
text-align: left;
}
这是工作示例： https : //www.bootply.com/Mz48qBWXFu
请注意，我无法在使用Bootstrap 4的jsfiddle上运行此代码。它引发错误： TOOLTIP: Option "template" provided type "function" but expected type "string"
显然，那里需要一些额外的调整。
更新
上面的所有内容在两个地方都是一个过大的杀伤力：
与其将工具提示样式类发布到元素的class属性中，不如使用data- property。 这样可以简化tooltipTemplate函数并删除startsWith代码shim：
tooltipTemplate = function () {
var tooltipClasses = $(this).data('tooltip-custom-classes');
return '<div class="tooltip" role="tooltip"><div class="tooltip-arrow ' + tooltipClasses +'"></div><div class="tooltip-inner ' + tooltipClasses +'"></div></div>';
}
更重要的是，我们根本不需要修改工具提示模板。 我们应该有一个对inserted.bs.tooltip事件的回调。 这样可以简化一切（感谢Oleg的回答https://stackoverflow.com/a/42994192/9921853 ）：
Bootstrap 3:
$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});
Bootstrap 4:
$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
$(tooltip.tip).addClass($(e.target).data('tooltip-custom-class'));
});
以下是整个示例：
对于Bootstrap 3
对于Bootstrap 4
解决方案3
0 2017-05-04 04:43:00
尝试这个
<i id="my-tooltip-1" class="fa fa-fire fa-lg" data-toggle="tooltip" data-placement="bottom" title="Fire Place"></i>
<style>
#my-tooltip-1 + .tooltip > .tooltip-inner {
padding: 15px;
font-size: 120%;
background-color: #FFEB6C;
color: #374D40;
/* do something */
}
#my-tooltip-1 + .tooltip > .tooltip-arrow {
background-color: #FFEB6C;
/* do something */
}
</style>
解决方案4
0 2019-01-10 05:50:47
我也一直在 （广泛地）寻找答案，以将不同的样式应用于 Bootsrap 4中的 选择性工具提示 ，并说我感到沮丧是一种轻描淡写的说法。
许多线程只是解决了全局.tooltip-inner样式的问题或使用脚本来完成此任务，甚至Bootstrap可能也应该提供了一种更简单的方法。
无论如何，这是我自己的个人情况和解决方法。
通常，我会使用基本的Bootstrap工具提示选项（ 我认为这已经在起作用 ，否则请参见下面的更新），以显示页面上出现的各种工具提示，但是在Navbar上，我在锚标签中有一个键盘快捷键Favicon，我想对其进行样式设置。 我完成此操作的方法是将其包装在span标签中（或乔治所说的“数据容器”）。
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' rel='stylesheet'/>
<link href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' rel='stylesheet'/>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js'/>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js'/>
<nav>
...
<span class="tt_kb">
<a class="nav-item nav-link px-2" href="#" data-toggle="tooltip" placement="auto" data-html="true" container="body" trigger="hover" data-container=".tt_kb" data-boundary="window" title="Keyboard Shortcuts ... blah blah blah"><i class="far fa-keyboard"></i></a>
</span>
...
</nav>
<style>
.tt_kb .tooltip .tooltip-inner {
background-color: #3266FF;
text-align: left;
width: 200px;
position: relative;
right: 50px;
}
</style>
对我来说奇怪的是， 由于某些原因 ，[ position =“ auto” ] 不起作用 （很好），因为我在导航栏的右上角有tt_kb Favicon， 工具提示的一半消失在了我的窗口之外 ，因此我在CSS中添加了 [ position：relative ＆ right：50px ]来解决此问题。 总体而言，这对我来说相当不错，我想稍加调整就可以使它在您的方案中起作用。
希望有帮助）
学分 ：想法来自乔治的“ 在每个工具提示上使用自定义样式 ”在线程stackoverflow / questions / re-color-tooltip-in-bootstrap-4中通用 ，不幸的是由于我我甚至不能标记注释有用。崭新无名（
更新
对于那些无法使用常规Bootstrap / Popper工具提示的用户，您可能需要在代码中添加以下脚本和常规样式。
<script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); $('[data-toggle="tooltip"]').each(function(){ var options = { html: true }; if ($(this)[0].hasAttribute('data-type')) { options['template'] = '<div class="tooltip ' + $(this).attr('data-type') + '" role="tooltip">' + ' <div class="tooltip-arrow"></div>' + ' <div class="tooltip-inner"></div>' + '</div>'; } $(this).tooltip(options); }); </script> </style> .tooltip.primary .tooltip-inner { background-color: #31b0d5; } .tooltip.primary.top > .tooltip-arrow { border-top-color: #337ab7; } .tooltip.primary.right > .tooltip-arrow { border-right-color: #337ab7; } .tooltip.primary.bottom > .tooltip-arrow { border-bottom-color: #337ab7; } .tooltip.primary.left > .tooltip-arrow { border-left-color: #337ab7; } .tooltip.info .tooltip-inner { background-color: #31b0d5; } .tooltip.info.top > .tooltip-arrow { border-top-color: #31b0d5; } .tooltip.info.right > .tooltip-arrow { border-right-color: #31b0d5; } .tooltip.info.bottom > .tooltip-arrow { border-bottom-color: #31b0d5; } .tooltip.info.left > .tooltip-arrow { border-left-color: #31b0d5; } .tooltip.success .tooltip-inner { background-color: #449d44; } .tooltip.success.top > .tooltip-arrow { border-top-color: #449d44; } .tooltip.success.right > .tooltip-arrow { border-right-color: #449d44; } .tooltip.success.bottom > .tooltip-arrow { border-bottom-color: #449d44; } .tooltip.success.left > .tooltip-arrow { border-left-color: #449d44; } .tooltip.warning .tooltip-inner { background-color: #ec971f; } .tooltip.warning.top > .tooltip-arrow { border-top-color: #ec971f; } .tooltip.warning.right > .tooltip-arrow { border-right-color: #ec971f; } .tooltip.warning.bottom > .tooltip-arrow { border-bottom-color: #ec971f; } .tooltip.warning.left > .tooltip-arrow { border-left-color: #ec971f; } .tooltip.danger .tooltip-inner { background-color: #d9534f; } .tooltip.danger.top > .tooltip-arrow { border-top-color: #d9534f; } .tooltip.danger.right > .tooltip-arrow { border-right-color: #d9534f; } .tooltip.danger.bottom > .tooltip-arrow { border-bottom-color: #d9534f; } .tooltip.danger.left > .tooltip-arrow { border-left-color: #d9534f; } </style>
更新
添加了可以正常运行的JSFiddle演示
注意：由于某些原因，导航栏将无法在演示中正确对齐，除非您将其放大至110 ％或125 ％！
Bootstrap工具提示 - 为不同的工具提示设置不同的宽度
[英]Bootstrap tool tip - setting different widths for different tooltips
Bootstrap工具提示无法在与数据表的第一个页面不同的页面中工作
[英]Bootstrap tooltips don't work in page different from the first of datatables
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.