"/> ">

Maison  >  Article  >  interface Web  >  Comment définir l'invite de passage de la souris dans le bootstrap

Comment définir l'invite de passage de la souris dans le bootstrap

爱喝马黛茶的安东尼
爱喝马黛茶的安东尼original
2019-07-13 17:17:404428parcourir

Comment définir l'invite de passage de la souris dans le bootstrap

1.   

<button type="button" rel="drevil" data-content="报名截止时间:&#39;+time+&#39;" data-container="body" data-toggle="popover" 
data-placement="bottom"></button>

2

$(function () { $("[data-toggle=&#39;popover&#39;]").popover(); });    
    $("[rel=drevil]").popover({
                      trigger:&#39;manual&#39;,
                      //placement : &#39;bottom&#39;, //placement of the popover. also can use top, bottom, 
                      left or right
                      //天title : &#39;<div style="text-align:center; color:red; text-decoration:underline; 
                      font-size:14px;"> Muah ha ha</div>&#39;, //this is the top title bar of the popover. 
                      add some basic css
                      html: &#39;true&#39;, //needed to show html of course
                      //content : &#39;<div id="popOverBox"><img src="http://www.hd-report.com/wp-content
                      /uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>&#39;, //this is the 
                      content of the html box. add the image here or anything you want really.
                      animation: false
                  }).on("mouseenter", function () {
                      var _this = this;
                      $(this).popover("show");
                      $(this).siblings(".popover").on("mouseleave", function () {
                          $(_this).popover(&#39;hide&#39;);
                      });
                  }).on("mouseleave", function () {
                      var _this = this;
                      setTimeout(function () {
                          if (!$(".popover:hover").length) {
                              $(_this).popover("hide")
                          }
                      }, 300);
                  });

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn