• 技术文章 >web前端 >Bootstrap教程

    bootstrap如何设置鼠标悬停提示

    爱喝马黛茶的安东尼爱喝马黛茶的安东尼2019-07-13 17:17:40原创3210

    1、     

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

    2、

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

    相关推荐:《bootstrap入门教程

    以上就是bootstrap如何设置鼠标悬停提示的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap 设置 鼠标
    上一篇:bootstrap和layui的区别 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • bootstrap的缩略图大小能设置么• spss中怎么用bootstrap做中介分析• bootstrap怎么自动转换px为rem• bootstrap与angularjs区别
    1/1

    PHP中文网