Bootstrap 具有不同样式的引导工具提示

o3imoua4  于 2023-08-01  发布在  Bootstrap
关注(0)|答案(4)|浏览(98)

我有工具提示显示使用数据切换，如在，

<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类，因为没有这样的元素，我通过数据切换来设置工具提示。
有什么办法可以让我做这个工作吗？- 谢谢-谢谢

twitter-bootstrap

4条答案

按热度按时间
8yparm6h

8yparm6h1#

很简单，我创建了一个类来保存这些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>
赞(0）分享  回复(0）举报  2023-08-01
n6lpvg4x

n6lpvg4x2#

我已经为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;
}

型
准备工具提示模板函数。它将从带有tooltip的元素中获取所有“tooltip-*”类，并将其附加到“tooltip-arrow”和“tooltip-inner”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;
}

型
下面是工作demo：https://www.bootply.com/Mz48qBWXFu

注意我无法在使用Bootstrap 4的jsfiddle上运行此代码。它抛出一个错误：TOOLTIP: Option "template" provided type "function" but expected type "string"

显然，一些额外的调整是必要的。

更新

上面的一切都是在两个地方过度杀戮：
与其在元素的class属性中发布工具提示样式类，不如使用data-属性。这将简化tooltipTemplate函数并删除startsWith代码填充：

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'));
});

型
以下是全部示例：
for Bootstrap 3的
for Bootstrap 4的

赞(0）分享  回复(0）举报  2023-08-01
tjjdgumg

tjjdgumg3#

试试这个

<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>

字符串

赞(0）分享  回复(0）举报  2023-08-01
yzuktlbb

yzuktlbb4#

我也一直在寻找（广泛）的答案在Bootsrap 4中对选择性工具提示应用不同的风格，说我感到 * 沮丧 * 是轻描淡写。

许多线程只是简单地处理样式global .tooltip-inner或使用脚本来完成这一点，甚至Bootstrap可能也应该提供一种更简单的方法。

  • 无论如何，这是我自己的个人场景和变通方案。*

我通常坚持使用基本的Bootstrap工具提示选项（* 我假设这已经工作了 ，否则请参阅下面的更新）来显示页面上的各种工具提示，但在我的导航栏上，我有一个我想样式化的锚标签中的键盘快捷方式Favicon。我完成这一点的方法是将它* Package 在一个span**标签中（或乔治所说的“数据容器”[见credits]）。

<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：50 px]来解决这个问题。总的来说，这对我来说效果相当不错，我想只要稍微调整一下，你就可以让它在你的场景中工作。
希望对您有所帮助）

学分：想法来自乔治的“* 使用自定义样式为每个工具提示 *”评论线程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'] =
              '&#60;div class="tooltip ' + $(this).attr('data-type') + '" role="tooltip"&#62;' +
              ' &#60;div class="tooltip-arrow"&#62;&#60;/div&#62;' +
              ' &#60;div class="tooltip-inner"&#62;&#60;/div&#62;' +
              '&#60;/div&#62;';
        }

        $(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 Demo

NB由于某些原因，导航栏在演示中无法对齐，除非您将其放大到110%或125%！

赞(0）分享  回复(0）举报  2023-08-01
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com