Как я могу сохранить всплывающие окна 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

172

Протестируйте с помощью фрагмента кода ниже:

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

Открывать всплывающее окно при наведении курсора для кнопки всплывающего окна
Держите всплывающее окно открытым при наведении курсора на всплывающее окно
Закройте всплывающее окно при отпускании мыши для кнопки всплывающего окна или всплывающего окна.

$(".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"). Но спасибо, все было так просто и чисто!

— козел отпущения17

3

Это потрясающий ответ. Отлично работает на BS3 по состоянию на май 2015 г. ^^

— degenerate

1

Я использовал его в таблице и добавил container: 'body'к параметрам, потому что он заставлял ячейки сдвигаться. Отличный ответ!

— Александр Дерк,

Всплывающее окно будет скрыто, если вы войдете в него, а затем вернетесь к элементу триггера до 300 мс. Чтобы исправить это, проверьте, являются ли И всплывающее окно, и его триггер: hover, прежде чем скрывать его в setTimeout. Я бы также использовал setTimeout и тот же подход для mouseleave самого всплывающего окна, чтобы исправить мерцание.

— 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);
    });

— Викас Девде
источник

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 05

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

— Рубенс Мариуццо

1

Блестяще. Это работает при использовании параметра «селектор», в отличие от других ответов.

— jetlej

1

Вот улучшенная версия, которая исправляет ошибку при выходе и повторном входе наконечника, который все еще скрывает его, а также исправляет сценарий, когда наконечник прикреплен к телу jsfiddle.net/Zf3m7/1499

— Золтан Тамаши

14

Я думаю, что простой способ:

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

Таким образом, всплывающее окно создается внутри самого целевого элемента. поэтому, когда вы наводите указатель мыши на всплывающее окно, оно все еще находится над элементом. Bootstrap 3.3.2 хорошо с этим работает. В старой версии могут быть проблемы с анимацией, поэтому вы можете отключить "animation: false"

— 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 in contentoption, чтобы взять контент со стороны сервера .. будет ли это работать, или мне нужно сделать дополнительную работу для этого

— vikas devde

@vikasdevde да, вы можете использовать ajaxв контенте, но вам нужно настроить, чтобы это работало ... пожалуйста, отметьте ответ правильно, если он решил ваш OP... чтобы другие могли получить выгоду

— Дэвид Чейз

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

— vikas devde

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

— Дэвид Чейз

2

Ни один из jsfiddle не работает для меня. Chrome 20 марта 2014 г.

— pferrel

7

Вот как я поступил с всплывающим окном начальной загрузки с помощью других битов в сети. Динамически получает заголовок и контент из различных продуктов, отображаемых на сайте. Каждый продукт или всплывающее окно получает уникальный идентификатор. Всплывающее окно исчезнет при выходе из продукта ($ this .pop) или всплывающего окна. Тайм-аут используется там, где будет отображаться всплывающее окно до выхода через продукт, а не всплывающее окно.

$(".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();
    };

— hoektoe
источник

Это также будет работать, если всплывающее окно не является дочерним элементом целевого элемента. +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"
  });
);

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

— forumulator
источник

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, ожидая, что всплывающее окно всегда будет братьями и сестрами элемента.

— Рубенс Мариуццо
источник

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

— Зартхост Боман
источник

-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>");
            }
        });
    }
}

Развернуть фрагмент

— Джулиано
источник