Як я можу зберегти живі перепони Bootstrap під час завивання?

114

Я використовую перемикач Bootstrap, щоб створити карту наведення вказівника, на якій відображається інформація про користувача, і я запускаю її при натисканні кнопки мишею. Я хочу зберегти цю попу в живих під час завивання самого попови, але він зникає, як тільки користувач перестає навішувати кнопку. Як я можу це зробити?

$('#example').popover({
    html : true,
    trigger : 'manual',
    content : function() {
        return '<div class="box">Popover</div>';
    }
});

$(document).on('mouseover', '#example', function(){
    $('#example').popover('show');
});

$(document).on('mouseleave', '#example', function(){
    $('#example').popover('hide');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

Розгорніть фрагмент

jquery twitter-bootstrap popper.js

— vikas devde
джерело

ти хочеш зберегти те, що живе? я наведіть на кнопку, і вона залишилася відкритою?

— Девід Чейз

прочитати останній рядок запитання

— vikas devde

172

Тест з фрагментом коду нижче:

Невелика модифікація (із рішення, наданого vikas), щоб відповідати моєму випадку використання.

Відкрийте popover при наведенні події для кнопки Popover
Тримайте popover відкритим, коли наведіть курсор на коробочку
Закрийте поповер на миші, щоб натиснути кнопку "перепон", або поле "перепон".

$(".pop").popover({
    trigger: "manual",
    html: true,
    animation: false
  })
  .on("mouseenter", function() {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function() {
      $(_this).popover('hide');
    });
  }).on("mouseleave", function() {
    var _this = this;
    setTimeout(function() {
      if (!$(".popover:hover").length) {
        $(_this).popover("hide");
      }
    }, 300);
  });

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>

  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <h2 class='text-primary'>Another Great "KISS" Bootstrap Popover example!</h2>
  <p class='text-muted'>KISS = Keep It Simple S....</p>

  <p class='text-primary'>Goal:</p>
  <ul>
    <li>Open popover on hover event for the popover button</li>
    <li>Keep popover open when hovering over the popover box</li>
    <li>Close popover on mouseleave for either the popover button, or the popover box.</li>
  </ul>

  <button type="button" class="btn btn-danger pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    HOVER OVER ME
    </button>
  <br><br>
  <button type="button" class="btn btn-info pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    HOVER OVER ME... Again!
    </button><br><br>
  <button type="button" class="btn btn-success pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br>                                    A placement group is a logical grouping of instances within a single Availability                                     Zone. Using placement groups enables applications to get the full-bisection bandwidth                                     and low-latency network performance required for tightly coupled, node-to-node                                     communication typical of HPC applications.<br>                                    This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br>                                    More info: <a href=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>Click here...</a>"
    data-original-title="" title="">
    Okay one more time... !
    </button>
  <br><br>
  <p class='text-info'>Hope that helps you... Drove me crazy for a while</p>
  <script src="script.js"></script>
</body>

</html>

Розгорніть фрагмент

— OkezieE
джерело

Це прекрасно працює, я помітив, що ;у вас вдруге пропав безвісти $(_this).popover("hide"). Але дякую, це було так просто і чисто!

— scapegoat17

3

Ця відповідь дивовижна. Чудово працює на BS3 станом на травень 2015 року ^^

— вироджено

1

Я використовував це в таблиці, і я додав container: 'body'параметри, тому що це змусило клітини зміщуватися. Чудова відповідь!

— Олександр Дерк

Попова приховується, якщо ввести її, а потім повернутися до спускового елемента до 300мс. Щоб виправити це, перевірте, чи ПОПОМ та його тригер: наведіть курсор, перш ніж ховати його в setTimeout. Я б також застосував setTimeout і той самий підхід на миші, щоб залишити сам поповер, щоб виправити мерехтіння.

— rzb

Обов’язково встановіть animation:false щоб виправити мерехтіння - перевірте посилання на Plunker, яке я маю вище. Це прекрасно працює для мене.

— OkezieE

84

Я прийшов після іншого рішення цього ... ось код

    $('.selector').popover({
        html: true,
        trigger: 'manual',
        container: $(this).attr('id'),
        placement: 'top',
        content: function () {
            $return = '<div class="hover-hovercard"></div>';
        }
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(this).siblings(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide")
            }
        }, 100);
    });

— vikas devde
джерело

6

Важливо додати в animation: falseіншому випадку переміщення миші через посилання неодноразово призведе до того, що воно не працює належним чином

— jasop

5

У мене є невелика модифікація вашого коду @vikas ( gist.github.com/Nitrodist/7913848 ). Він повторно перевіряє стан після 50мм, щоб він не залишався відкритим. Тобто, вона постійно перевіряє її кожні 50 мс.

— Nitrodist

2

Як це можна адаптувати, щоб він працював на елементах, що додаються до документа, щойно додані до документа?

— williamsowen

28

Ось мій взяття: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Іноді під час переміщення миші з пункту перемикання на фактичний вміст переповненого діагонально , ви наведіть курсор на елементи нижче. Мені хотілося вирішувати такі ситуації - доки ви не досягнете вмісту, який пережив час, до того часу, як вимкнетесь, ви в безпеці (потужність не зникне). Тут потрібен delayваріант.

Цей хак в основному переосмислює leaveфункцію Popover , але викликає оригінал (який запускає таймер, щоб приховати поповер). Потім він приєднує одноразового слухачаmouseenter елемента переробки вмісту.

Якщо миша потрапить у поповер, таймер очищається. Потім він виявляється, що він слухає, mouseleaveколи він проходить, і якщо він спрацьовує, він викликає оригінальну функцію залишення, щоб він міг запустити таймер приховування.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
  var container, timeout;

  originalLeave.call(this, obj);

  if(obj.currentTarget) {
    container = $(obj.currentTarget).siblings('.popover')
    timeout = self.timeout;
    container.one('mouseenter', function(){
      //We entered the actual popover – call off the dogs
      clearTimeout(timeout);
      //Let's monitor popover content instead
      container.one('mouseleave', function(){
        $.fn.popover.Constructor.prototype.leave.call(self, self);
      });
    })
  }
};

— Войтек Крушевський
джерело

5

Пошук контейнера можна вдосконалити за допомогою container = self.$tip;цього способу навіть можна знайти поповер, коли встановлено containerвластивість. Тут є загадка : jsfiddle.net/dennis_c/xJc65

— dbroeks

3

@pferrel Я вирішив це питання в моїй роздрібці загадки @Wojtek_Kruszewski: jsfiddle.net/HugeHugh/pN26d див. частину, яка перевіряє if (!thisTip.is(':visible'))перед викликомoriginalShow()

— H Dog

1

Якщо поповер буде ініціалізований з опцією, container: 'body',це рішення не працюватиме, як очікувалося. Змінна containerповинна бути замінена на self.$tip. Перевірте моя відповідь для більш докладної інформації: stackoverflow.com/a/28731847/439427

— Рубенс Mariuzzo

1

Блискуча. Це працює, коли використовується параметр "selector", на відміну від інших відповідей.

— jetlej

1

Ось вдосконалена версія, яка виправляє помилку під час виходу та повторного введення наконечника, який все ще приховував її, а також фіксує сценарій, коли наконечник прикріплений до тіла jsfiddle.net/Zf3m7/1499

— Zoltán Tamási

14

Думаю, простим способом було б таке:

$('.popover').each(function () {
                    var $this = $(this);
                    $this.popover({
                        trigger: 'hover',
                        content: 'Content Here',
                        container: $this
                    })
                });

Таким чином створюється потужність всередині самого цільового елемента. тож, коли ви переміщуєте мишу над поповою, вона все ще над стихією. Bootstrap 3.3.2 добре справляється з цим. Старіша версія може мати деякі проблеми з анімацією, тому ви можете вимкнути "анімацію: помилково"

— Cu Lý
джерело

Я знаю, що цей потік старий, але це найкраще, найчистіше рішення на мій погляд, і його слід класифікувати вище. Єдине застереження полягає в тому, що це може зламатися, якщо розташувати попову (дивним чином) «подалі» від спускового елемента. Але поки відстань між двома дорівнює нулю (наприклад, вони перетинаються), це прекрасно працює і не вимагає спеціальних JS. Дякую!

— JohnGalt

Це найкраще, чисте, найпростіше рішення поки що. Слід класифікувати вище! Я додав, delay: { "hide": 400 }щоб додати деяку затримку перед приховуванням, і це чудово працює! 👍

— coorasse

14

Я використав набір тригера hoverі дав набір контейнерів до #elementі, нарешті, додав розміщення boxдо right.

Це має бути ваша установка:

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'right',
    content: function () {
        return '<div class="box"></div>';
    }
});

і #examplecss потрібно position:relative;перевірити jsfiddle нижче:

https://jsfiddle.net/9qn6pw4p/1/

Відредаговано

Ця скрипка має обидва посилання, які працюють без проблем http://jsfiddle.net/davidchase03/FQE57/4/

— Девід Чейз
джерело

Хм, що працює, чи можу я використати jquery ajax у contentваріанті, щоб взяти вміст з боку сервера. Чи буде це робота, або мені потрібно зробити для цього додаткову роботу

— vikas devde

@vikasdevde Так, ви можете використовувати ajaxвміст, але вам потрібно налаштувати, щоб це працювало ... Будь ласка, позначте відповідь правильно, якщо це вирішило ваше OP.. щоб інші могли отримати користь

— Девід Чейз

але якщо ми використовуємо саме посилання як контейнер, то вся попова стає посиланням .... спробуйте

— vikas devde

якщо ви помістите посилання всередину поля, воно все одно буде посилатися .. правильно?

— Девід Чейз

2

Жоден з jsfiddle не працює для мене. Chrome 20 березня 2014.

— pferrel

7

Ось як я це робив з popover завантажувачем за допомогою інших бітів по мережі. Динамічно отримує заголовок та вміст від різних продуктів, що відображаються на сайті. Кожен продукт або поповер отримує унікальний ідентифікатор. Poverver зникне при виході з продукту ($ this .pop) або popover. Тайм-аут використовується там, де буде відображатися попова до виходу через продукт замість Popover.

$(".pop").each(function () {
        var $pElem = $(this);
        $pElem.popover(
            {
                html: true,
                trigger: "manual",
                title: getPopoverTitle($pElem.attr("id")),
                content: getPopoverContent($pElem.attr("id")),
                container: 'body',
                animation:false
            }
        );
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        console.log("mouse entered");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 100);
    });
    function getPopoverTitle(target) {
        return $("#" + target + "_content > h3.popover-title").html();
    };

    function getPopoverContent(target) {
        return $("#" + target + "_content > div.popover-content").html();
    };

— хокей
джерело

Це також спрацює, якщо поповер не є дочірнім елементом цілі. +1

— Таха Паксу

6

Ось розроблене нами рішення, яке, здається, працює добре, а також дозволяє використовувати звичайну реалізацію Bootstrap для ввімкнення всіх перехожих.

Оригінальна скрипка: https://jsfiddle.net/eXpressive/hfear592/

Опубліковано це питання:

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

$('#example').popover({
    html : true,
    trigger : 'hover',
    content : function() {
        return '<div class="box"></div>';
    }
}).on('hide.bs.popover', function () {
    if ($(".popover:hover").length) {
      return false;
    }                
}); 

$('body').on('mouseleave', '.popover', function(){
    $('.popover').popover('hide');
});

— eXpressiveDesign
джерело

2

Я погоджуюся з тим, що найкращим способом є використання того, яке надали: Девід Чейз , Ку Лі та інші, що найпростіший спосіб зробити це - використовувати container: $(this)майно наступним чином:

$(selectorString).each(
  var $this = $(this);
  $this.popover({
    html: true,
    placement: "top",
    container: $this,
    trigger: "hover",
    title: "Popover",
    content: "Hey, you hovered on element"
  });
);

Я хочу тут зазначити, що Popover у цьому випадку успадкує всі властивості поточного елемента . Так, наприклад, якщо ви зробите це для .btnелемента (завантажувального пристрою ), ви не зможете вибрати текст усередині попова . Я просто хотів записати, що так як я витратив досить багато часу на це, стукаючи головою.

— форумчатор
джерело

1

Відповідь Вікаса прекрасно працює для мене, тут я також додаю підтримку затримки (показати / приховати).

var popover = $('#example');
var options = {
    animation : true,
    html: true,
    trigger: 'manual',
    placement: 'right',
    delay: {show: 500, hide: 100}
};   
popover
    .popover(options)
    .on("mouseenter", function () {

        var t = this;
        var popover = $(this);    
        setTimeout(function () {

            if (popover.is(":hover")) {

                popover.popover("show");
                popover.siblings(".popover").on("mouseleave", function () {
                    $(t).popover('hide');
                });
            }
        }, options.delay.show);
    })
    .on("mouseleave", function () {
        var t = this;
        var popover = $(this);

        setTimeout(function () {
            if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {
                $(t).popover("hide")
            }
        }, options.delay.hide);
    });

Також зверніть увагу, я змінив:

if (!$(".popover:hover").length) {

з:

if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {

щоб він посилався саме на цей відкритий попу, а не на будь-який інший (оскільки зараз через затримку можна відкрити більше 1 одночасно)

— user1993198
джерело

Коментар, який я зробив наприкінці, насправді

— неправий,

1

Обрана відповідь спрацьовує, але буде невдалою, якщо поповер ініціалізується bodyяк контейнер.

$('a').popover({ container: 'body' });

Рішення, засноване на обраній відповіді, - це наступний код, який потрібно розмістити перед тим, як використовувати поповер.

var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj) {
    var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type);
    originalLeave.call(this, obj);

    if (obj.currentTarget) {
        self.$tip.one('mouseenter', function() {
            clearTimeout(self.timeout);
            self.$tip.one('mouseleave', function() {
                $.fn.popover.Constructor.prototype.leave.call(self, self);
            });
        })
    }
};

Зміна мінімальна, використовуючи self.$tipзамість того, щоб пройти DOM, очікуючи, що Popover завжди буде побратимом елемента.

— Рубенс Маріуццо
джерело

0

Те ж саме для підказок:

Для мене наступне рішення працює, тому що воно не додає слухачів подій у кожному "мишіцентрі" і можна повернутись на елемент підказки, який підтримує підказку.

$ ->

  $('.element').tooltip({
    html: true,
    trigger: 'manual'
  }).
  on 'mouseenter', ->
    clearTimeout window.tooltipTimeout
    $(this).tooltip('show') unless $('.tooltip:visible').length > 0
  .
  on 'mouseleave', ->
    _this = this
    window.tooltipTimeout = setTimeout ->
      $(_this).tooltip('hide')
    , 100

$(document).on 'mouseenter', '.tooltip', ->
  clearTimeout window.tooltipTimeout

$(document).on 'mouseleave', '.tooltip', ->
  trigger = $($(this).siblings('.element')[0])
  window.tooltipTimeout = setTimeout ->
    trigger.tooltip('hide')
  , 100

— phlppn
джерело

0

Це рішення для мене вийшло чудово: (тепер його бронежилетом) ;-)

function enableThumbPopover() {
    var counter;

    $('.thumbcontainer').popover({
        trigger: 'manual',
        animation: false,
        html: true,
        title: function () {
            return $(this).parent().find('.thumbPopover > .title').html();
        },
        content: function () {
            return $(this).parent().find('.thumbPopover > .body').html();
        },
        container: 'body',
        placement: 'auto'
    }).on("mouseenter",function () {
        var _this = this; // thumbcontainer

        console.log('thumbcontainer mouseenter')
        // clear the counter
        clearTimeout(counter);
        // Close all other Popovers
        $('.thumbcontainer').not(_this).popover('hide');

        // start new timeout to show popover
        counter = setTimeout(function(){
            if($(_this).is(':hover'))
            {
                $(_this).popover("show");
            }
            $(".popover").on("mouseleave", function () {
                $('.thumbcontainer').popover('hide');
            });
        }, 400);

    }).on("mouseleave", function () {
        var _this = this;

        setTimeout(function () {
            if (!$(".popover:hover").length) {
                if(!$(this).is(':hover'))
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}

— Йоганнес Фернер
джерело

0

        $(function() {
            $("[data-toggle = 'popover']").popover({
                placement: 'left',
                html: true,
                trigger: "  focus",
            }).on("mouseenter", function() {
                var _this = this;
                $(this).popover("show");
                $(this).siblings(".popover").on("mouseleave", function() {
                    $(_this).popover('hide');
                });
            }).on("mouseleave", function() {
                var _this = this;
                setTimeout(function() {
                    if (!$(".popover:hover").length) {
                        $(_this).popover("hide")
                    }
                }, 100);
            });
        });

— Дінеш Сарак
джерело

0

Я виявив, що mouseleaveволя не спрацює, коли трапляються дивні речі, як-от фокус вікна раптово змінюється, тоді користувач повертається до браузера. У таких випадках,mouseleave ніколи не запускається, доки курсор не перейде і не покине елемент знову.

Це рішення , яке я придумав покладається на mouseenterна windowоб'єкті, так воно зникає , коли миша переміщується в іншому місці на сторінці.

Це було розроблено для роботи з наявністю на сторінці декількох елементів, які запускатимуть її (як у таблиці).

var allMenus = $(".menus");
allMenus.popover({
    html: true,
    trigger: "manual",
    placement: "bottom",
    content: $("#menuContent")[0].outerHTML
}).on("mouseenter", (e) => {
    allMenus.not(e.target).popover("hide");
    $(e.target).popover("show");
    e.stopPropagation();
}).on("shown.bs.popover", () => {
    $(window).on("mouseenter.hidepopover", (e) => {
        if ($(e.target).parents(".popover").length === 0) {
            allMenus.popover("hide");
            $(window).off("mouseenter.hidepopover");
        }
    });
});

— Габріель Люці
джерело

0

Він буде більш гнучким із hover():

$(".my-popover").hover(
    function() {  // mouse in event
        $this = $(this);
        $this.popover({
            html: true,
            content: "Your content",
            trigger: "manual",
            animation: false
            });
        $this.popover("show");
        $(".popover").on("mouseleave", function() {
            $this.popover("hide");
        });
    },
    function() {  // mouse out event
        setTimeout(function() {
            if (!$(".popover:hover").length) {
                $this.popover("hide");
            }
        }, 100);
    } 
)

— Сірий Лі
джерело

0

Просто :)

$('[data-toggle="popover"]').popover( { "container":"body", "trigger":"focus", "html":true });
$('[data-toggle="popover"]').mouseenter(function(){
    $(this).trigger('focus');
});

— edmc73
джерело

0

Нещодавно мені було потрібно, щоб це працювало з KO, і вищезазначені рішення не спрацювали добре, коли у вас з'явилася затримка на показі та захованні. Нижче слід це виправити. На основі того, як працюють підказки для завантажувальних інструментів. Сподіваюся, що це комусь допоможе.

var options = {
                delay: { show: 1000, hide: 50 },
                trigger: 'manual',                      
                html: true
            };
var $popover = $(element).popover(options);

$popover.on('mouseenter', function () { // This is entering the triggering element
    var self = this;

    clearTimeout(self.timeout);
    self.hoverState = 'in';

    self.timeout = setTimeout(function () {
        if (self.hoverState == 'in') {
            $(self).popover("show");

            $(".popover, .popover *").on('mouseover', function () { // This is moving over the popover
                clearTimeout(self.timeout);
            });                                                                 

            $(".popover").on('mouseleave', function () { // This is leaving the popover
                self.timeout = setTimeout(function () {
                    if (self.hoverState == 'out') {
                        $(self).popover('hide');
                    }
                }, options.delay.hide);
            });
        }
    }, options.delay.show);
}).on('mouseleave', function (event) { // This is leaving the triggering element
    var self = this;

    clearTimeout(self.timeout);
    self.hoverState = 'out';

    self.timeout = setTimeout(function () {                             
        if (self.hoverState == 'out') {
            $(self).popover('hide');
        }

    }, options.delay.hide);
});

— Zarthost Boman
джерело

-1

Це мій код підказки щодо динаміки шоу із затримкою та завантажений ajax.

$(window).on('load', function () {
    generatePopovers();
    
    $.fn.dataTable.tables({ visible: true, api: true }).on('draw.dt', function () {
        generatePopovers();
    });
});

$(document).ajaxStop(function () {
    generatePopovers();
});

Розгорніть фрагмент

function generatePopovers() {
var popover = $('a[href*="../Something.aspx"]'); //locate the elements to popover

popover.each(function (index) {
    var poplink = $(this);
    if (poplink.attr("data-toggle") == null) {
        console.log("RENDER POPOVER: " + poplink.attr('href'));
        poplink.attr("data-toggle", "popover");
        poplink.attr("data-html", "true");
        poplink.attr("data-placement", "top");
        poplink.attr("data-content", "Loading...");
        poplink.popover({
            animation: false,
            html: true,
            trigger: 'manual',
            container: 'body',
            placement: 'top'
        }).on("mouseenter", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (thispoplink.is(":hover")) {
                    thispoplink.popover("show");
                    loadDynamicData(thispoplink); //load data by ajax if you want
                    $('body .popover').on("mouseleave", function () {
                        thispoplink.popover('hide');
                    });
                }
            }, 1000);
        }).on("mouseleave", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (!$("body").find(".popover:hover").length) {
                    thispoplink.popover("hide");
                }
            }, 100);
        });
    }
});

Розгорніть фрагмент

function loadDynamicData(popover) {
    var params = new Object();
    params.somedata = popover.attr("href").split("somedata=")[1]; //obtain a parameter to send
    params = JSON.stringify(params);
    //check if the content is not seted
    if (popover.attr("data-content") == "Loading...") {
        $.ajax({
            type: "POST",
            url: "../Default.aspx/ObtainData",
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (data) {
                console.log(JSON.parse(data.d));
                var dato = JSON.parse(data.d);
                if (dato != null) {
                    popover.attr("data-content",dato.something); // here you can set the data returned
                    if (popover.is(":hover")) {
                        popover.popover("show"); //use this for reload the view
                    }
                }
            },

            failure: function (data) {
                itShowError("- Error AJAX.<br>");
            }
        });
    }
}

Розгорніть фрагмент

— Джуліано
джерело