So verwenden Sie Popover in Bootstrap, um die Show-Hide-Funktion zu implementieren

Jetzt werde ich mit Ihnen einen Artikel darüber teilen, wie Sie das Bootstrap-Popover verwenden, um die Funktion zum Anzeigen und Ausblenden beim Bewegen der Maus zu implementieren. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Dieser JS-Code kann die Funktion des Anzeigens und Ausblendens der Popover-Eingabeaufforderungsinformationen realisieren, wenn die Maus in das Popover hinein und aus diesem heraus bewegt wird

var strContent = &#39;<p class="media"><p class="position-left media-left"><img class="img-circle" src="/assets/images/avatar.jpg">&#39;+
         &#39;</p>&#39;+
         &#39;<p class="media-body">&#39;+
          &#39;<h4 class="media-title">小标题</h4>&#39;+
          &#39;<p><strong>张三</strong> <span class="label label-primary">管理员</span></p>&#39;+
         &#39;</p>&#39;+
         &#39;</p>&#39;;
$( &#39;li#user_avatar&#39; ).popover({
  trigger:&#39;manual&#39;,
	placement:&#39;bottom&#39;,
	html:true,
	container:&#39;#bs-example-navbar-collapse-1&#39;,
	content:strContent,
}).on( &#39;mouseenter&#39;, function(){ 
  var _this = this; 
  $(this).popover( &#39;show&#39; ); 
  $(this).siblings( &#39;.popover&#39; ).on( &#39;mouseleave&#39; , function () { 
    $(_this).popover( &#39;hide&#39; ); 
  }); 
}).on( &#39;mouseleave&#39;, function(){ 
  var _this = this; 
  setTimeout(function () { 
    if (!$( &#39;.popover:hover&#39; ).length) { 
      $(_this).popover( &#39;hide&#39; ) 
    }
  }, 100); 
});

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Wie integriere ich Vue in ein JQuery/Bootstrap-Projekt?

Klicken Sie auf die Seitenzahl, um den Seiteninhalt beim Paging in vue.js zu ändern

So implementieren Sie Wertübertragung und Kommunikation in vue2.0 Komponenten

Neue Funktionen der Webpack 4.0.0-Beta.0-Version (ausführliches Tutorial)

Verwenden Sie SpringMVC, um domänenübergreifende Vue-Anfragen zu lösen

So implementieren Sie die WeChat-Freigabe in Moments und senden Freunde in Vue

So erstellen Sie eine große Single-Page-Anwendung mit vue.js

Wie verwende ich implizite Aufrufe in JavaScript?

Detaillierte Erläuterung der Verwendung von Devtool im Webpack

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Popover in Bootstrap, um die Show-Hide-Funktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!