Добавление настраиваемого класса в всплывающую подсказку

Я хочу создать (css) некоторые подсказки bootstrap-tooltip.js, не затрагивая всех всплывающих подсказок. Я пробовал много разных решений, но я всегда добавляю класс к элементу, который запускает всплывающую подсказку.

Это то, что я пробовал:

$(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"
/>

Как я могу назначить настраиваемый класс для своей всплывающей подсказки, а не поле ввода, которое запускает его?

Ответ 1

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

Ответ 2

Метод, который я использую, - это присоединить класс непосредственно к элементу через JQuery (работает в Bootstrap 3). Это немного сложнее, потому что вам нужно найти скрытый, автоматически сгенерированный элемент через родительский атрибут data.

$('#[id$=amount]')
  .tooltip()
    .data('bs.tooltip')
      .tip()
      .addClass('custom-tooltip-class');

Я предпочитаю это переопределять шаблон, потому что он гораздо более краткий и менее подробный, чем весь этот дополнительный HTML.

Ответ 3

Я создал небольшое расширение для модуля Boottrap Tooltip, которое позволяет добавлять пользовательские классы для всплывающих подсказок с помощью параметра customClass в 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).

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

Bootstrap 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;
}

САСС mixin:

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

Ответ 4

Попробуйте установить параметр 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>'
  });
});

Честно говоря, я не уверен, что это сработает, но я считаю, что это стоит того.

EDIT: после чтения этого сообщения это может быть более полезно.

Ответ 5

Перед .addClass попробуйте добавить .parent(), пока не получите родительский div. Кроме того, вы всегда можете использовать селектор jQuery, чтобы найти div, который вы хотите, и обновить CSS оттуда.

Ответ 6

Может быть, это поможет кому-то вроде этого помогло мне:

Добавить пользовательский класс в вашу "сгенерированную" подсказку node:

$(document).ready(function() {
    $(".my-class").tooltip({
        tooltipClass:"my-custom-tooltip"
    });
});

Пример вывода в качестве последнего дочернего элемента body:

<div id="ui-tooltip-1" role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content my-custom-tooltip" style="top: 295px; left: 908px; display: block;">
    <div class="ui-tooltip-content">My title contnet</div>
</div>

Применительно к этой логике вопросов:

$(function(){
  $("[id$=amount]").tooltip({
    trigger: 'manual',
    placement: 'right'
    tooltipClass:'test'
  })
});

Протестировано с использованием jQuery UI - v1.10.3