So führen Sie eine bootstrap popover auf mouseover-Ereignis

Ich habe eine html-Tabelle mit einer Zeile, die sieht wie folgt aus:

<tr>
    <td><input type="checkbox" name="check[]" value="265"></td>   
    <td>265</td>
    <td>NO MATCH</td>
    <td>http://stackoverflow.com/</td>
    <td>No</td>
    <td>0</td>
    <td>f79a8316891</td>
  </tr>

Ich versuche zu bauen, die eine jquery-Funktion, öffnet eine bootstrap-2.32 popover, wenn ich geben Sie eine URL in der Zelle der Tabelle. Bisher habe ich:

    $("[data-bind='popover']").popover({
         trigger: 'hover',
         html: true,
         content: function(){ 
          return $(this).data('content');
         }
        });



        $('td').on('mouseover', function(e) {
            var contents = $( this ).html() ;

            if (contents.match("^http")) {
                console.log(contents);

                 this.innerHTML = '<a href="myreference.html" data-bind="popover"' + ' data-content="'+contents +'"> link </a>';
                 console.log(this.innerHTML);

            }
        });

Den popover Teil dieser basiert auf http://jsfiddle.net/8DP4T/1/

Wenn ich den Mauszeiger über eine url in der Tabelle, es bildet sich ein popover link wie erwartet. Aber als ich mit der Maus über die es keine popup tritt, soweit ich das sehen kann. Der code funktioniert schon , aber es ist nicht die Auslösung der popover.

Interessant , ich habe auch 

<a href="myreference.html" data-bind="popover data-content="http://upload.wikimedia.org/wikipedia/commons/a/a5/Flower_poster_2.jpg">Brick</a>

unter meinem Tisch, und dies ist die Arbeit mit einem popover erstellt. Ich Frage mich, ob dieses Verhalten hat etwas zu tun mit der Reihenfolge der Operationen, da die popover-link dynamisch erzeugt wird, nachdem der DOM ist bereits gesetzt. Kann jemand mir raten, hier?

  • sollte es $('.popover-markup > .trigger') wie im jsfiddle?
  • Das funktioniert auch nicht.
  • Sie nie initialisieren Sie die Anker, die Sie erzeugen, in die Zelle der Tabelle, für Sie zu arbeiten, müssen Sie es initialisieren, wie die anderen.
InformationsquelleAutor user61629 | 2015-01-22
  1. 3

    Den Standard-Auslöser für einen bootstrap popover ist ein 'click' - Ereignis. Was haben Sie hier definiert ist "Auf" mouseover überprüfen, um zu sehen, wenn der Inhalt unter meine Maus ist ein link, und wenn ja, definieren Sie ein popover", aber dein problem ist, dass Sie nie ausgelöst wird das popover zu öffnen, die Sie gerade definiert es so, dass, wenn Sie klicken-es öffnet sich.

    Ändern Sie diese...

    $('.popover-markup').popover(...)

    Zu diesem...

    $(this).popover(...)

    So, dass die "<td>" wird das popover (ich bin mir nicht 100% sicher, Sie können definieren ein <td> als popover, aber es scheint, wie es funktionieren sollte). Dann, sofort nach Ihrem code definiert, der im popover Optionen, die Sie auslösen kann, ein "Klick" - Ereignis, oder Sie auslösen können, es zu öffnen, durch das senden der "show" - Befehl. Schließlich, können Sie veranlassen, es zu öffnen, durch hinzufügen von "trigger":"hover", um Ihre Liste der Optionen bei der Festlegung des popover... die auto-verstecken, nachdem der Benutzer nicht mehr die Maus über das td-element. 

    //Trigger click
$(this).trigger("click");

//Trigger popover open (probably the better way)
$(this).popover("show");

//Trigger on hover
$(this).popover({
    ...
    trigger: 'hover',
});

    So, in allen...

    $('td').on('mouseover', function(e) {
     var contents = $( this ).html() ;

    if (contents.match("^http")) {
       $(this).popover({
            html : true,
            title: function() {
              return $(this).parent().find('.head').html();
            },
            content: function() {
              return $(this).parent().find('.content').html();
            },
            container: 'body',
            placement: 'bottom'
        });

        //Trigger the popover to open
        $(this).popover("show");
    }
});
    • Danke, ich werde wieder kommen auf diese Frage. Ich erkannte, dass der popover überhaupt nicht funktioniert entweder, indem Sie auf oder schweben.
    • Ich habe das popover arbeiten mit bootstrap 2.32 , und ich geändert haben, die Frage mit Ihren Rat auf, wie man diesen Ansatz.
    • Ich denke, Sie sind auf dem richtigen Weg, also werde ich akzeptiere Ihre Antwort, aber es gibt einige Probleme in Bezug auf dynamisch erzeugte popovers. - stackoverflow.com/questions/11947094/...
    InformationsquelleAutor jake_nerdnest
  2. 3

    Müssen Sie

    trigger: 'hover'

    um das options-Objekt als unten:

    JS:

    $('.popover-markup > .trigger').popover({
        html : true,
        title: function() {
          return $(this).parent().find('.head').html();
        },
        content: function() {
          return $(this).parent().find('.content').html();
        },
        container: 'body',
        placement: 'bottom',
        trigger: 'hover'
    });

    HTML:

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<div class="popover-markup">
  <a href="#" class="trigger">
    This link triggers the popover.
  </a>
  <div class="head hide">
    This is the popover title.
   </div>
  <div class="content hide">
    <p>This is the popover content.</p>
  </div>
</div>

    InformationsquelleAutor Franz Sittampalam
Schreibe einen Kommentar