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.js有什么用

怎样给html元素设置焦点

超链接的宽高怎样设置

bootstrap怎么实现响应式布局

bootstrap怎么实现响应式布局

bootstrap原理是什么

浅谈bootstrap响应式图片的实现方法

bootstrap框架是什么

bootstrap如何拖拽组件

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




打赏

取消

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

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

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

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

评论

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