bootstrap如何设置鼠标悬停提示


本文摘自PHP中文网,作者爱喝马黛茶的安东尼,侵删。

1、     

1

2

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

data-placement="bottom"></button>

2、

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

$(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定义上弹菜单

bootstrap表单怎么提交信息

bootstrap怎么实现自适应高度

css怎么改变鼠标形状

浅谈使用bootstrap-datepicker插件实现日期录入处理功能

bootstrap怎么安装

bootstrap框架的好处

bootstrap命令是什么意思

vue中怎么引入bootstrap

详解bootstrap中的辅助类

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...