jquery - ツールチップにカスタムクラスを追加する

Question

すべてのツールチップに影響を与えずに、いくつかのbootstrap-tooltip.jsツールチップをスタイル（css）したいと思います。私はさまざまな解決策を試しましたが、ツールチップをトリガーする要素にクラスを追加することになります。

これは私が試したものです：

$(function(){
  $("[id$=amount]").tooltip({
    trigger: 'manual',
    placement: 'right'
  }).addClass("test"); // <--- This does not help me. Class just ends up 
});                    //      in the trigger element. Se html output 
                       //      from firebug below...

しかし、クラスはツールチップをトリガーする要素になります。

<input 
     id="list_wishes_attributes_0_amount" 
     class="test"  <!-- The class I tried to add to the tooltip ended up here. -->
     type="text" 
     tabindex="3" 
     size="30" 
     rel="tooltop" 
     name="list[wishes_attributes][0][amount]" 
     min="0" 
     data-original-title="Only numbers please"
/>

ツールチップをトリガーする入力フィールドではなく、ツールチップにカスタムクラスを割り当てるにはどうすればよいですか？

score 72 · Accepted Answer

(Boostap 5 を含めるために 2021 年 3 月 23 日に更新)

Bootstrap 4 より前:

$().tooltip({
  template: '<div class="tooltip CUSTOM-CLASS"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
})

ブートストラップ 4:

$().tooltip({
  template: '<div class="tooltip CUSTOM-CLASS" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
})

Bootstrap 5: ソース内にカスタムクラスを追加する機能が追加されたため、はるかに簡単に実行できます。

$().tooltip({
  customClass: 'CUSTOM-CLASS'
})

純粋な Javascript:

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {customClass: 'CUSTOM-CLASS'})

またはhtmlで：

<a href="http://stackoverflow.com" data-bs-custom-class="CUSTOM-CLASS" title="Some Helpful Info!" role="tooltip">Stackoverflow.com</a>

score 14 · Accepted Answer

(更新: 2021 年 2 月 21 日)

ブートストラップ 5

カスタムクラスは、公式ドキュメントで説明されているように、customClassオプション (JS の場合) またはHTML のを追加することで使用できます。data-bs-custom-class="..."

https://getbootstrap.com/docs/5.0/components/tooltips/#options

ブートストラップ 4 / ブートストラップ 3

customClassBootstrap Tooltip プラグイン用の小さな拡張機能を作成しました。これにより、Javascript のパラメーターを使用するかdata-custom-class、HTML の属性を使用して、ツールチップのカスタムクラスを追加できます。

使用法

data-custom-class属性経由:

data-custom-class="tooltip-custom"- クラスでツールチップを作成しtooltip-customます。

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-custom" title="Custom tooltip example">Tooltip example</button>

customClassパラメータ経由：

customClass: 'tooltip-custom'

$('.my-element').tooltip({
    customClass: 'tooltip-custom'
});

設定：

コードは、使用する Bootstrap のバージョン (v3、v4-alpha、または v4) によって異なります。

ブートストラップ v4

Javascript

;(function($) {

  if (typeof $.fn.tooltip.Constructor === 'undefined') {
    throw new Error('Bootstrap Tooltip must be included first!');
  }

  var Tooltip = $.fn.tooltip.Constructor;

  // add customClass option to Bootstrap Tooltip
  $.extend( Tooltip.Default, {
    customClass: ''
  });

  var _show = Tooltip.prototype.show;

  Tooltip.prototype.show = function () {

    // invoke parent method
    _show.apply(this,Array.prototype.slice.apply(arguments));

    if ( this.config.customClass ) {
        var tip = this.getTipElement();
        $(tip).addClass(this.config.customClass);
    }

  };

})(window.jQuery);

CSS

.tooltip-custom .tooltip-inner {
  background-color: #5b2da3;
}
.tooltip-custom.bs-tooltip-top .arrow:before {
  border-top-color: #5b2da3;
}
.tooltip-custom.bs-tooltip-right .arrow:before {
  border-right-color: #5b2da3;
}
.tooltip-custom.bs-tooltip-left .arrow:before {
  border-left-color: #5b2da3;
}
.tooltip-custom.bs-tooltip-bottom .arrow:before {
  border-bottom-color: #5b2da3;
}

サス

@mixin tooltip-custom($bg-color, $color: $tooltip-color) {

  .tooltip-inner {
    background-color: $bg-color;
    @if $color != $tooltip-color {
      color: $color;
    }
  }

  &.bs-tooltip-top .arrow:before {
    border-top-color: $bg-color;
  }

  &.bs-tooltip-right .arrow:before {
    border-right-color: $bg-color;
  }

  &.bs-tooltip-left .arrow:before {
    border-left-color: $bg-color;
  }

  &.bs-tooltip-bottom .arrow:before {
    border-bottom-color: $bg-color;
  }

}

例： https ://jsfiddle.net/zyfqtL9v/

2020 年 1 月 8 日更新: 最新の Bootstrap バージョン (4.4.1) と互換性があります: https://jsfiddle.net/ep0mk94t/

ブートストラップ v3.3.7

Javascript

(function ($) {

  if (typeof $.fn.tooltip.Constructor === 'undefined') {
    throw new Error('Bootstrap Tooltip must be included first!');
  }

  var Tooltip = $.fn.tooltip.Constructor;

  $.extend( Tooltip.DEFAULTS, {
    customClass: ''
  });

  var _show = Tooltip.prototype.show;

  Tooltip.prototype.show = function () {

    _show.apply(this,Array.prototype.slice.apply(arguments));

    if ( this.options.customClass ) {
        var $tip = this.tip()
        $tip.addClass(this.options.customClass);
    }

  };

})(window.jQuery);

CSS

.tooltip-custom .tooltip-inner {
  background-color: #5b2da3;
}
.tooltip-custom.top .tooltip-arrow {
  border-top-color: #5b2da3;
}
.tooltip-custom.right .tooltip-arrow {
  border-right-color: #5b2da3;
}
.tooltip-custom.left .tooltip-arrow {
  border-left-color: #5b2da3;
}
.tooltip-custom.bottom .tooltip-arrow {
  border-bottom-color: #5b2da3;
}

例： https ://jsfiddle.net/cunz1hzc/

ブートストラップ v4.0.0-alpha.6

Javascript

;(function($) {

  if (typeof $.fn.tooltip.Constructor === 'undefined') {
    throw new Error('Bootstrap Tooltip must be included first!');
  }

  var Tooltip = $.fn.tooltip.Constructor;

  // add customClass option to Bootstrap Tooltip
  $.extend( Tooltip.Default, {
      customClass: ''
  });

  var _show = Tooltip.prototype.show;

  Tooltip.prototype.show = function () {

    // invoke parent method
    _show.apply(this,Array.prototype.slice.apply(arguments));

    if ( this.config.customClass ) {
      var tip = this.getTipElement();
      $(tip).addClass(this.config.customClass);
    }

  };

})(window.jQuery);

CSS

.tooltip-custom .tooltip-inner {
    background-color: #5b2da3;
}
.tooltip-custom.tooltip-top .tooltip-inner::before, 
.tooltip-custom.bs-tether-element-attached-bottom .tooltip-inner::before {
    border-top-color: #5b2da3;
}
.tooltip-custom.tooltip-right .tooltip-inner::before, 
.tooltip-custom.bs-tether-element-attached-left .tooltip-inner::before {
    border-right-color: #5b2da3;
}
.tooltip-custom.tooltip-bottom .tooltip-inner::before,
.tooltip-custom.bs-tether-element-attached-top .tooltip-inner::before {
    border-bottom-color: #5b2da3;
}
.tooltip-custom.tooltip-left .tooltip-inner::before,
.tooltip-custom.bs-tether-element-attached-right .tooltip-inner::before {
    border-left-color: #5b2da3;
}

SASSミックスイン:

@mixin tooltip-custom($bg-color, $color: $tooltip-color) {
  
  .tooltip-inner {
    background-color: $bg-color;
    @if $color != $tooltip-color {
     color: $color;
  }
}

&.tooltip-top,
&.bs-tether-element-attached-bottom {
  .tooltip-inner::before {
    border-top-color: $bg-color;
  }
}

&.tooltip-right,
&.bs-tether-element-attached-left {
  .tooltip-inner::before {
    border-right-color: $bg-color;
  }
}

&.tooltip-bottom,
&.bs-tether-element-attached-top {
  .tooltip-inner::before {
    border-bottom-color: $bg-color;
  }
}

&.tooltip-left,
&.bs-tether-element-attached-right {
  .tooltip-inner::before {
    border-left-color: $bg-color;
  }
}

}

例： https ://jsfiddle.net/6dhk3f5L/

score 1 · Accepted Answer

セレクターが多くのツールチップを返す場合に機能するこの回答の代替:

$("[id$=amount]")
  .tooltip()
  .each((i, el)=> $(el).data('bs.tooltip').tip().addClass('test'));

(ブートストラップ 2 および 3 では問題ないはずです)。

score 0 · Accepted Answer

オプションをに設定し、オプションhtmlに次のtrueようなものを挿入してみてください。<span class="test">YOUR TEXT</span>title

$(function(){
  $("[id$=amount]").tooltip({
    trigger: 'manual',
    placement: 'right',
    html: true,
    title: '<span class="test">YOUR TEXT</span>'
  });
});

正直なところ、これが機能するかどうかはわかりませんが、試してみる価値はあると思います。

編集：この投稿を読んだ後、もっと役立つかもしれません。

score 0 · Accepted Answer

の前に、親を取得するまで.addClass追加してみてください。また、いつでもjQueryセレクターを使用して、必要なを見つけ、そこからCSSを更新できます。.parent()divdiv

jquery - ツールチップにカスタムクラスを追加する

8 に答える 8

ブートストラップ 5

ブートストラップ 4 / ブートストラップ 3

使用法

設定：

ブートストラップ v4

ブートストラップ v3.3.7

ブートストラップ v4.0.0-alpha.6

Related

Reference