Come posso mantenere in vita i popover Bootstrap mentre sono in volo?

114

Sto usando un popover Bootstrap per creare una hover card che mostra le informazioni dell'utente e lo sto attivando al passaggio del mouse su un pulsante. Voglio mantenere attivo questo popover mentre il popover stesso viene sospeso, ma scompare non appena l'utente smette di passare il mouse sul pulsante. Come posso fare questo?

$('#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>

Espandi lo snippet

jquery twitter-bootstrap popper.js

— vikas devde
fonte

vuoi mantenere in vita cosa? ho passato il mouse sul pulsante ed è rimasto aperto?

— David Chase

leggi l'ultima riga della domanda

— vikas devde

172

Prova con lo snippet di codice di seguito:

Piccola modifica (dalla soluzione fornita da vikas) per adattarsi al mio caso d'uso.

Apri popover su evento hover per il pulsante popover
Mantieni il popover aperto quando passi il mouse sopra la casella popover
Chiudi il popover all'uscita del mouse per il pulsante popover o per la casella 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>

Espandi lo snippet

— OkezieE
fonte

Funziona perfettamente, ho notato che mancava un ;secondo in te $(_this).popover("hide"). Ma grazie, era così semplice e pulito!

— capro espiatorio

3

Questa risposta è sorprendente. Funziona alla grande su BS3 a partire da maggio 2015 ^^

— degenerato

1

L'ho usato in una tabella e l'ho aggiunto container: 'body'alle opzioni perché ha fatto spostare le celle. Bella risposta!

— Alexander Derck

Il popover viene nascosto se lo inserisci e poi torni all'elemento trigger prima di 300 ms. Per risolverlo, controlla se SIA il popover che il suo trigger sono: hover prima di nasconderlo in setTimeout. Userei anche setTimeout e lo stesso approccio su mouseleave il popover stesso, per correggere lo sfarfallio.

— rzb

Assicurati di impostare animation:falseper correggere lo sfarfallio: controlla il link Plunker che ho sopra. Funziona perfettamente per me.

— OkezieE

84

Sono venuto dopo un'altra soluzione a questo ... ecco il codice

    $('.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
fonte

6

È importante aggiungere, animation: falsealtrimenti spostare ripetutamente il mouse sul collegamento non funzionerà correttamente

— jasop

5

Ho una piccola modifica al tuo codice @vikas ( gist.github.com/Nitrodist/7913848 ). Ricontrolla le condizioni dopo 50 ms in modo che non rimanga bloccato aperto. Cioè, lo ricontrolla continuamente ogni 50 ms.

— Nitrodist

2

Come può essere adattato in modo che funzioni su elementi live appena aggiunti al documento?

— williamsowen

28

Ecco la mia opinione : http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

A volte, mentre si sposta il mouse dall'attivazione del popover al contenuto del popover effettivo in diagonale , si passa con il mouse sugli elementi sottostanti. Volevo gestire tali situazioni: finché raggiungi il contenuto del popover prima che scatti il timeout, sei al sicuro (il popover non scomparirà). Richiede delayopzione.

Questo hack fondamentalmente sovrascrive la leavefunzione Popover , ma chiama l'originale (che avvia il timer per nascondere il popover). Quindi collega un ascoltatore mouseenterunico all'elemento di contenuto del popover.

Se il mouse entra nel popover, il timer viene cancellato. Quindi mouseleaveattiva l' ascolto in popover e, se viene attivato, chiama la funzione leave originale in modo che possa avviare il timer nascosto.

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

— Wojtek Kruszewski
fonte

5

La ricerca del contenitore potrebbe essere migliorata utilizzando In container = self.$tip;questo modo, il popover può essere trovato anche quando la containerproprietà è impostata. C'è un violino qui: jsfiddle.net/dennis_c/xJc65

— dbroeks

3

@pferrel ho risolto questo problema nel mio fork del violino di @Wojtek_Kruszewski : jsfiddle.net/HugeHugh/pN26d vedi la parte che controlla if (!thisTip.is(':visible'))prima di chiamare iloriginalShow()

— H Dog

1

Se il popover viene inizializzato con l'opzione, container: 'body',questa soluzione non funzionerà come previsto. La variabile containerdeve essere sostituita con self.$tip. Controlla la mia risposta per maggiori dettagli: stackoverflow.com/a/28731847/439427

— Rubens Mariuzzo

1

Brillante. Questo funziona quando si utilizza il parametro "selettore", a differenza delle altre risposte.

— jetlej

1

Ecco una versione migliorata che risolve un bug quando si esce e rientrando la punta lo nascondeva ancora, e corregge anche lo scenario quando la punta è attaccata al corpo jsfiddle.net/Zf3m7/1499

— Zoltán Tamási

14

Penso che un modo semplice sarebbe questo:

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

In questo modo il popover viene creato all'interno dell'elemento di destinazione stesso. quindi quando sposti il mouse sul popover, è ancora sopra l'elemento. Bootstrap 3.3.2 funziona bene con questo. La versione precedente potrebbe avere alcuni problemi con l'animazione, quindi potresti voler disabilitare "animation: false"

— Cu Lý
fonte

So che questo thread è vecchio, ma questa è la soluzione migliore e più pulita secondo me e dovrebbe essere classificata più in alto. L'unico avvertimento è che questo si interromperà, se posizioni il popover (in un modo strano) "lontano" dall'elemento trigger. Ma fintanto che la distanza tra i due è zero (ad esempio, si sovrappongono), funziona magnificamente e non richiede alcun JS personalizzato. Grazie!

— JohnGalt

Questa è la soluzione migliore, pulita e più semplice finora. Dovrebbe essere classificato più in alto! Ho aggiunto delay: { "hide": 400 }di aggiungere un po 'di ritardo prima di nascondermi e funziona benissimo! 👍

— coorasse

14

Ho usato il trigger impostato su hovere ho dato il set di contenitori a #elemente infine ho aggiunto un posizionamento di boxa right.

Questa dovrebbe essere la tua configurazione:

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

e #exampleCSS deve position:relative;controllare il jsfiddle di seguito:

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

Modificato

Questo violino ha entrambi i collegamenti che funzionano senza problemi http://jsfiddle.net/davidchase03/FQE57/4/

— David Chase
fonte

hmm che funziona, posso usare jquery ajax in contentopzione, per prendere il contenuto dal lato server .. funzionerà o devo fare del lavoro extra per quello

— vikas devde

@vikasdevde sì, puoi usarlo ajaxnel contenuto ma devi configurarlo perché funzioni ... per favore segna la risposta giusta se ha risolto il tuo OP.. così gli altri possono trarne vantaggio

— David Chase

ma se usiamo il link stesso come contenitore, l'intero popover diventa un link .... provalo

— vikas devde

se metti un link all'interno della scatola verrà comunque collegato .. corretto?

— David Chase

2

Nessuno dei lavori di jsfiddle per me. Chrome 20 marzo 2014.

— pferrel

7

È così che ho fatto con il bootstrap popover con l'aiuto di altri bit in rete. Ottiene dinamicamente il titolo e il contenuto dai vari prodotti visualizzati sul sito. Ogni prodotto o popover ottiene un ID univoco. Il popover scomparirà quando si esce dal prodotto ($ this .pop) o dal popover. Viene utilizzato il timeout dove verrà visualizzato il popover fino all'uscita dal prodotto invece del 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();
    };

— hoektoe
fonte

Funzionerà anche se il popover non è un figlio dell'elemento di destinazione. +1

— Taha Paksu

6

Ecco una soluzione che ho ideato che sembra funzionare bene mentre ti consente anche di utilizzare la normale implementazione di Bootstrap per attivare tutti i popover.

Violino originale: https://jsfiddle.net/eXpressive/hfear592/

Portato a questa domanda:

<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
fonte

2

Sono d'accordo che il modo migliore sia usare quello fornito da: David Chase , Cu Ly e altri che il modo più semplice per farlo è usare la container: $(this)proprietà come segue:

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

Voglio sottolineare qui che il popover in questo caso erediterà tutte le proprietà dell'elemento corrente . Quindi, ad esempio, se lo fai per un .btnelemento (bootstrap), non sarai in grado di selezionare il testo all'interno del popover . Volevo solo registrarlo visto che ho passato un bel po 'di tempo a sbattere la testa su questo.

— forumulator
fonte

1

La risposta di Vikas funziona perfettamente per me, qui aggiungo anche il supporto per il ritardo (mostra / nascondi).

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

Inoltre, fai attenzione che ho cambiato:

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

con:

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

in modo che faccia riferimento esattamente a quel popover aperto e non a qualsiasi altro (poiché ora, attraverso il ritardo, più di 1 potrebbe essere aperto allo stesso tempo)

— user1993198
fonte

Il commento che ho fatto alla fine in realtà non è corretto quando si usa container: body, se è così devo ancora usare la soluzione di Vikas per quella riga

— user1993198

1

La risposta scelta funziona ma fallirà se il popover viene inizializzato con bodycome contenitore.

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

Una soluzione basata sulla risposta scelta è il seguente codice che deve essere inserito prima di utilizzare il popover.

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

La modifica è minima utilizzando self.$tipinvece di attraversare il DOM aspettandosi che il popover sia sempre un fratello dell'elemento.

— Rubens Mariuzzo
fonte

0

Stessa cosa per i tooltip:

Per me la seguente soluzione funziona perché non aggiunge listener di eventi su ogni 'mouseenter' ed è possibile tornare indietro con il mouse sull'elemento tooltip che mantiene vivo il tooltip.

$ ->

  $('.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
fonte

0

Questa soluzione ha funzionato bene per me: (ora è a prova di proiettile) ;-)

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

— Johannes Ferner
fonte

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

— Dinesh Sarak
fonte

0

Ho scoperto che la mouseleavevolontà non si attiva quando accadono cose strane, come il fuoco della finestra cambia improvvisamente, quindi l'utente torna al browser. In casi come questo, mouseleavenon si attiverà mai finché il cursore non si sposta e abbandona nuovamente l'elemento.

Questa soluzione mi è venuta si affida mouseentersul windowoggetto, in modo che scompare quando il mouse viene spostato in qualsiasi altro luogo sulla pagina.

Questo è stato progettato per funzionare con più elementi sulla pagina che lo attiveranno (come in una tabella).

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

— Gabriel Luci
fonte

0

Sarà più flessibile con 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);
    } 
)

— Gray Li
fonte

0

Semplice :)

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

— edmc73
fonte

0

Recentemente avevo bisogno di farlo funzionare con KO e le soluzioni di cui sopra non funzionavano bene quando si verificava un ritardo nello show and hide. Quanto segue dovrebbe risolvere questo problema. Basato su come funzionano i tooltip di bootstrap. Spero che questo aiuti qualcuno.

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
fonte

-1

Questo è il mio codice per mostrare i suggerimenti sulle dinamiche con ritardo e caricati da ajax.

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

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

Espandi lo snippet

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

Espandi lo snippet

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

Espandi lo snippet

— Giuliano
fonte