Динамически добавлять класс к контейнеру Bootstrap 'popover'

Я тщательно просмотрел как StackOverflow, так и Google, но придумал пустой. Приносим извинения заранее, если это уже было задано и разрешено.

NB: Я новичок в jQuery, поэтому я не уверен, как написать это сам. Я уверен, что это простой фрагмент кода, но он не может обернуть вокруг него голову.

Я хочу использовать элемент data- (например: data-class или аналогичный), чтобы прикрепить новый класс (или идентификатор, я больше не придирчивый!) до верхнего уровня <div>. Код, который у меня есть, выглядит следующим образом:

JQuery

$('a[rel=popover]')
    .popover({
        placement : 'bottom',
        trigger : 'hover'
    })
    .click(function(e) {
        e.preventDefault()
    });

HTML:

<a href="" rel="popover" data-class="dynamic-class" title="Title goes here" data-content="Content goes here">

И в идеале такой HTML, который я бы выплюнул, выглядит примерно так:

<div class="popover ... dynamic-class">
    <!-- remainder of the popover code as per usual -->
</div>

Я что-то могу сделать? Документация на загрузочном сайте для popovers немного редка, поэтому мне потребовалось некоторое время, чтобы добраться до этого момента, к сожалению: (

Спасибо за любые ответы!

ОТВЕТЫ

Ответ 1

Основываясь на том, что написал @bchhun и много царапин на голове, я чувствовал, что должен ответить на мой собственный вопрос, поскольку я получил его работу. Я также заметил, что это понравилось и понравилось, поэтому я надеюсь, что помогу кому-то другому, кто является новичком в jQuery, как я.

В текущей сборке Bootstrap [v2.1.0] все скрипты объединены. Поэтому, если вы включили все сценарии в свою сборку (и не отредактировали какие-либо новые строки/взяли некоторые из них), перейдите к строке 1108 файла без ограничений .js. Вы найдете следующий бит кода:

$tip
  .css(tp)
  .addClass(placement)
  .addClass('in')

Теперь вы добавите новую строку:

  .addClass(this.$element.attr("data-class"))

Итак, всякий раз, когда вы добавляете data-class в вызов popover, он добавляет атрибут в div <div class="popover">.

Теперь, когда я вижу это, это так очевидно:)

Ответ 2

Вы можете сделать это без взлома Bootstrap и без изменения шаблона, захватив объект popover от вызывающего data и получить доступ к свойству $tip.

$('a[rel=popover]')
  .popover({ placement: 'bottom', trigger: 'hover' })
  .data('bs.popover')
  .tip
  .addClass('my-super-popover');

Ответ 3

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

var pop = $('a', this.el).popover({
  trigger: 'click'
  , template: '<div class="popover awesome-popover-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
});

Ответ 4

Это старый пост, но я добавляю его как ссылку. Изменив Shankar Cabus, вместо добавления динамического класса к родительскому, он будет добавлен в созданный div.popover.

$(function(){
    $('a[rel=popover]')
    .popover({
        placement : 'bottom',
        trigger : 'hover'
    })
    .on("hover", function(){
        $('.popover').addClass($(this).data("class")); //Add class .dynamic-class to <div>
    });
});

Надеюсь, что это поможет:)

Ответ 5

Просто установите скрытый параметр "шаблон" при инициализации всплывающей подсказки. Я не знаю, почему команда bootstrap будет держать это в секрете...

$(elem).popover({
    template: '<div class="popover YOURCLASS"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
}).popover('show');

Надеюсь, что это поможет...

Ответ 6

Это было задано несколько лет назад, и есть много ответов. Но... Мне недавно пришлось самому решить ту же проблему, и я - (а) хотел избежать манипуляции с исходным кодом и (б) нуждался в универсальном решении для повторного использования (поэтому использование решения template: '...' для каждой инициализации было выход).

Мое решение было достаточно простым и похоже на выраженный ответ - я понял, что popover является расширением библиотеки tooltip.js. Я имею в виду - проверьте это, исходный код содержит не более ста строк. Поэтому я создал файл с именем popover-extend.js и скопировал весь исходный код popover. Оттуда было легко - просто манипулировать этими строками:

Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
    // add this:
    cls: ''
});

то

Popover.prototype.setContent = function () {
    // add this:
    if (this.options.cls) {
        $tip.addClass(this.options.cls);    
    }

Теперь вы можете сделать:

<a href="#" rel="popover" 
   data-cls="dynamic-class" 
   title="Title goes here" data-content="Content goes here">

Это действительно хороший подход, если вы похожи на меня и хотите добавить больше функциональности. например, здесь, как я добавил общую кнопку закрытия для заголовка (хотя для этого требуется, чтобы popover имел указанный идентификатор):

// added this to the the DEFAULTS
close: ''


// added this to the setContent function
if (this.options.close) {
    var id = this.$element.attr('id'),
        btn = $("<button></button>", {
            "class": "close",
            "id": "close",
            "onclick": "$('#"+id+"').popover('hide');"
    }),

    title = $tip.find('.popover-title');

    btn.html("&times;");
    btn.appendTo(title);
}

Самое интересное, что все, что вы установили в DEFAULTS, можно настроить через html, то есть, если вы добавите переменную с именем foo, вы автоматически сможете ее обработать с помощью data-foo=.

Надеюсь, что это поможет любому, кто ищет альтернативу управлению исходным кодом.

Ответ 7

Как насчет добавления этого класса ТОЛЬКО к соответствующему popover, без таргетинга на других?

$('#someElement').popover({placement: function(context, src) {
    $(context).addClass('my-custom-class');
    return 'top'; // - 'top' placement in my case
});

или некоторые варианты, например, взятие пользовательского имени класса из данных "someElement", например:

$('#someElement').popover({placement: function(context, src) {
    $(context).addClass($(src).data('customClassName'));
    return 'top';
});

Ответ 8

У меня была та же проблема, мне понравился ответ @Kate, но изменения в исходном файле могут вызвать много проблем в будущем, вы, вероятно, забудете эти небольшие изменения при обновлении своей начальной версии. Поэтому я нашел другой способ сделать это:

 $(element).popover({...}).data("popover").tip().addClass("your_class")

Как @CorayThan исправить его с помощью data("popover")

Метод tip() popover возвращает элемент popover и создает, когда он не создан, поэтому вы всегда получаете правильный элемент popover, даже если вы находятся в инициализации popover (это мой случай = D).

Ответ 9

Это становится поздно здесь, и я устаю, но здесь быстрый однострочный динамик, который не будет работать в будущем, если вы решите обновить файлы bootstrap js.

Взгляните на файл bootstrap-tooltip.js в gist в строке 150.

И здесь измененная подсказка в действии:

Here's the modified tooltip in action

Осмотрите окно инспектора там, и вы заметите, что динамический класс был добавлен в подсказку.

Завтра отправлю более долгосрочный и подходящий ответ.

Ответ 10

Это работает для меня. Это вдохновлено документацией bootstrap из здесь, раздела События.

$("a[rel=popover]").popover().on("show.bs.popover", function(){
    $(".popover").addClass("your-custom-class");
});

Ответ 11

Также вы можете использовать опции "template" 

$element.popover({                               
   html: true,
   trigger: 'click',
   template: '<div class="popover '+MY_CLASS+'" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
   content: function() {
    return 'hello';
   }
});

Обновите MY_CLASS из вашего атрибута класса данных.

Ответ 12

Расширьте свой класс со стороны bootstrap core class, просто добавьте атрибут data-class и параметр dataClass: true к вашей функции tooltip

!function($){   
    $.extend($.fn.tooltip.Constructor.DEFAULTS,{
        dataClass: false
    }); 
    var Tooltip = $.fn.tooltip.Constructor;
        _show = Tooltip.prototype.show;

    Tooltip.prototype.show = function (){
        _show.apply(this,Array.prototype.slice.apply(arguments));

        if (this.options.dataClass!=="undefined" && this.options.dataClass){
            var that = this;
            var $tip = this.tip();
            if (this.$element.attr("data-class") !== undefined)
                $tip.addClass(this.$element.attr("data-class"));
        }
    };
}(jQuery);

Ответ 13

для bootstrap v3.3.2 вы найдете эти строки на bootstrap.js

   $tip
    .detach()
    .css({ top: 0, left: 0, display: 'block' })
    .addClass(placement)
    .data('bs.' + this.type, this)

Затем вы добавляете эту строку

    .addClass(this.$element.attr("data-class"))

Теперь, чтобы добавить класс в ваш элемент popover, вы просто поместите атрибут data-class="classexemple", тогда все работает отлично

Найдите нас www.mixpres.com

Ответ 14

В Bootstrap 4 вы можете использовать атрибут data-template:

<button data-toggle="popover" data-template='<div class="popover MYSUPERCLASS" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' data-offset="-10 0" data-html="true" data-trigger="focus" data-placement="bottom" data-content='My Popover'>Button</button>

Ответ 15

Извините, но не совсем понял ваш вопрос... Но вы хотите добавить родительский div? Успокойтесь... Посмотрите, хотите ли вы этого:

$(function(){
    $('a[rel=popover]')
    .popover({
        placement : 'bottom',
        trigger : 'hover'
    })
    .on("click", function(){
        $(this).closest("div").addClass($(this).data("class")); //Add class .dynamic-class to <div>
    });
});

Демо: http://jsfiddle.net/PRQfJ/

Ответ 16

лучший вариант, который работает на каждом уровне BS, заключается в том, чтобы сделать его внутри класса specefic и после показа этого, найти этот класс и добавить ваше имя класса для всплывающего его патента

// create a template that add the message inside
var $tmp = $("<div class='popoperrormessage'>" + error + "</div>");


            $(this).popover("destroy").popover({
                trigger: "manual",
                animation: false,
                html: true,
                placement:"right",
                content: $tmp,
                container: "body"
            }).popover("show");


            // now we have to find the parent of the popoperrormessagemessage
            $(".popoperrormessage").parents(".popover").addClass("hello");

Теперь у вашего popover будет привет класс

Ответ 17

Вот мой способ обхода, возможно, не самый эффективный, но я нашел его самым легким в реализации.

 $('[data-content]').each(function(){
    var options = {
        html: true //optional
    };

    if ($(this)[0].hasAttribute('data-class')) {
        options['template'] = '<div class="popover" role="tooltip ' + $(this).attr('data-class') + '"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>';
    }

    $(this).popover(options);
});

Просто добавьте data-class="custom-class" к элементу, подобному другим примерам.

Ответ 18

Вы можете использовать параметр container, чтобы обойти это.

$('[data-toggle="popover"]').popover({
    container: '#foo'
});

или установите его через атрибут тега

<a href="#" data-toggle="popover" data-container="#foo" data-content="Content">Foo</a>

И добавьте это где-нибудь перед закрытием тега body

<div id="foo"></div>

Тогда вы можете сделать что-то вроде #foo > .popover. Я знаю, что это не одноразовое решение, но это один из способов сделать это.

Ответ 19

Я не уверен, почему вы хотите это сделать, но в моем примере я просто хотел установить пользовательский стиль... Поэтому в CSS только что написан правильный селектор для текущего popover. a.rating-popover - это моя ссылка для открытия popover. → элемент popover будет сгенерирован до следующего этого элемента. поэтому мы можем выбрать его с помощью

a.rating-popover + div.popover{
   background: blue;
}

и вуаля, синий фон. только для всплывающих окон, открытых с помощью элемента a.rating-popover.