Добавление пользовательского класса к всплывающей подсказке
Я хочу придать стиль (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"
/>Как я могу назначить пользовательский класс для моей всплывающей подсказки, а не для поля ввода, которое ее вызывает?
До появления Bootstrap 4:
$().tooltip({
template: '<div class="tooltip CUSTOM-CLASS"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
})Bootstrap 4:
$().tooltip({
template: '<div class="tooltip CUSTOM-CLASS" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
})
Метод, который я использую, чтобы прикрепить класс непосредственно на элемент через jQuery (работает в Bootstrap 3). Это's немного сложнее, ведь нужно найти скрытые, автоматически сгенерированный элемент через родительская'атрибуты-ный`.
в
$('#[id$=amount]')
.tooltip()
.data('bs.tooltip')
.tip()
.addClass('custom-tooltip-class');Я предпочитаю, чтобы это переопределение шаблона, потому что он'ы гораздо более сжатой и менее подробной, чем все, что дополнительный HTML.
Я'ве создали небольшое расширение для загрузки плагина tooltip, который позволяет добавлять пользовательские классы для подсказок с помощью параметра `customClass в JavaScript или через данных пользовательских атрибута класса в формате HTML.
Использование:
- атрибутов данных-пользовательских-класса:
данные-пользовательские-класс="в тултипе-изготовленный на заказ" в - строит подсказка, Подсказка-пользовательский класс`.
<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: 'подсказка-пользовательские'
$('.my-element').tooltip({
customClass: 'tooltip-custom'
});Установка#:
Код отличается в зависимости от версии загрузчика использован (В3, В4-Альфа или В4).
Ушко В4 (совместимо с V4.0.0 и V4.1.0)
Язык 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);УСБ
.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;
}
}Пример:
Начальной загрузки В3.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);УСБ
.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/
Загрузки В4.0.0-Альфа.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);УСБ
.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 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/
GitHub РЕПО:
https://github.com/andreivictor/bootstrap-tooltip-custom-class
Может быть, это может помочь кому-то, как помогло мне:
Добавить пользовательский класс в вашу "автоматически" и узел подсказка:
$(document).ready(function() {
$(".my-class").tooltip({
tooltipClass:"my-custom-tooltip"
});
});Образец вывода в качестве последнего дочернего элемента тела:
<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 - В1.10.3
Альтернатива этот ответ, которая работает в случае селектор возвращает много подсказок: в
$("[id$=amount]")
.tooltip()
.each((i, el)=> $(el).data('bs.tooltip').tip().addClass('test'));(это должно быть нормально для Bootstrap 2 и 3).
Перед .addClass попробуйте добавить .parent(), пока не получите родительский div. Также вы всегда можете использовать селекторы jQuery, чтобы найти нужный вам div и обновить CSS оттуда.
Попробуйте установить параметр html в значение true и вставить в параметр title что-то вроде <span class="test">YOUR TEXT</span>.
$(function(){
$("[id$=amount]").tooltip({
trigger: 'manual',
placement: 'right',
html: true,
title: '<span class="test">YOUR TEXT</span>'
});
}); Честно говоря, я не уверен, что это сработает, но думаю, что попробовать стоит.
EDIT: После прочтения этого поста это может быть более полезным.
