方法一：介绍bootstrap组件Popover弹出框自定义内容的方法
Popover的常用参数以及使用方法可以详见 http://www.runoob.com/bootstrap/bootstrap-popover-plugin.html
要实现如图所示效果：
1：引入样式和js文件
<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
2：html代码
<body> <a class="btn btn-lg btn-danger" role="button">弹出框2</a> <a class="btn btn-lg btn-success" role="button">弹出框3</a> </body>
3：js代码
$(function () { $('a').each(function () { var element = $(this); var txt = element.html(); element.popover({ trigger: 'manual', placement: 'auto', //top, bottom, left or right // title: txt, html: 'true', content: ContentMethod(txt), }).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") } }, 100); }); }); }); function ContentMethod(txt){ return '<input type="text" class="form-control"><span>弹出框</span>'; };
缺点就是，此方法自定义的弹出框的内容是用js拼成的html代码，当需要显示的内容比较多的时候页面加载起来比较慢，js代码看起来也会比较杂乱冗余。
方法二：简单的逻辑：试用相对定位控制对应元素的显示隐藏
1：html代码
<table> <tbody> <tr> <td class="same-name"> <a href="javascript:;" data-id="<?= $v['order_id']?>"><?= $v['order_sn'] ?></a> <div class="order-goods" id="order_goods_layer"></div><!-显示的内容-> </td> ... </tr> <tr> <td class="same-name"> <a href="javascript:;" data-id="<?= $v['order_id']?>"><?= $v['order_sn'] ?></a> <div class="order-goods" id="order_goods_layer"></div><!-显示的内容-> </td> ... </tr> <tr> <td class="same-name"> <a href="javascript:;" data-id="<?= $v['order_id']?>"><?= $v['order_sn'] ?></a> <div class="order-goods" id="order_goods_layer"></div><!-显示的内容-> </td> ... </tr> </tbody> </table>
2：js代码
$(document).ready(function(){ var t; $('.same-name i').mouseover(function() { var url = '<?= base_url('Sale_manage/OrderCenter/get_order_div')?>'; var order_id = $(this).data("id"); var get_data = {'order_id':order_id}; $.getJSON(url, get_data, function(data) { if (data.code == 1) { $('.same-name span').empty(); $('.same-name span').html(data.data); } else { alert(data.msg); } }); $('.same-name span').hide(); $(this).siblings('span').show(); }); $('.same-name i').mouseout(function() { t = setTimeout(yc(),1000); function yc(){ $('.same-name span').hide(); }; }); $('.same-name span').mouseover(function() { clearTimeout(t); $(this).show(); }); $('.same-name span').mouseout(function() { $(this).hide(); }); })
这个方法的缺点：不能根据鼠标触发的位置来自定义提示框的位置，当鼠标触发屏幕底部的几个元素来弹出对应提示框，并且提示框内容相对比较多显示的
时候超出整个div范围导致页面出现滚动条，这时的体验就非常不好，可能会出现页面抖动等情况，那怎样实现像插件里面那样能根据触发位置自适应弹出框的位置呢？
我试了两个方法：
1：根据判断页面是否出现滚动条，来修改弹出框的位置（向上弹出/向下弹出），但是此方法也有漏洞，因为是先判断有无滚动条再决定弹出框的位置，
那就是说出现滚动条的时候就会有页面的抖动，事实证明不可行。
2：根据判断 鼠标触发的元素到屏幕底部的距离 来决定弹出框的位置，此方法暂时未发现问题，所以上面代码更新为：
function mouseover_init(){ var t; var w_h = $(window).height(); //获取屏幕的高度 $('.cl-order-sn a').mouseover(function() { var url = '<?= base_url('Sale_manage/Order/get_goingout_order_div')?>'; var order_id = $(this).data("id"); var get_data = {'order_id':order_id}; $.getJSON(url, get_data, function(data) { if (data.code == 1) { $('.cl-order-sn .order-goods').empty(); $('.cl-order-sn .order-goods').html(data.data); } else { alert(data.msg); } }); var a_h_t = $(this).offset().top - $(window).scrollTop(); //获取触发元素到顶部的距离 var a_h_b = w_h - a_h_t; //触发元素到底部的距离 if (a_h_b < 250) { $('.cl-order-sn .order-goods').hide(); $(this).siblings('.order-goods').addClass('position_b').removeClass('position_t').show(); } else{ $('.cl-order-sn .order-goods').hide(); $(this).siblings('.order-goods').addClass('position_t').removeClass('position_b').show(); }; }); $('.cl-order-sn a').mouseout(function() { t = setTimeout(yc(),1000); function yc(){ $('.cl-order-sn .order-goods').hide(); }; }); $('.cl-order-sn .order-goods').mouseover(function() { clearTimeout(t); $(this).show(); }); $('.cl-order-sn .order-goods').mouseout(function() { $(this).hide(); }); };
方法三：webui-popover插件，它兼容bootstrap但并不依赖于bootstrap
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" /> <title>基于Bootstrap的轻量级弹出提示框插件</title> <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.css"> </head> <body> <table> <thead> <tr> <th>订单号</th> <th>名称</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td><a href="#" class="show-pop-table" data-placement="auto">123456789</a></td> <td>【破损】天衡宝 甜薯三文鱼无谷犬粮(细颗粒) 4.5磅</td> <td>正常</td> </tr> <tr> <td><a href="#" class="show-pop-table" data-placement="auto">123456789</a></td> <td>【破损】天衡宝 甜薯三文鱼无谷犬粮(细颗粒) 4.5磅</td> <td>正常</td> </tr> </tbody> </table> <div id="tableContent" style="display:none;"> <table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.js"></script> <script> (function(){ var tableContent = $('#tableContent').html(); $('a.show-pop-table').webuiPopover({ content: tableContent, trigger: 'hover', 500, multi: true, placement: 'auto', padding: true, delay: 300, closeable: false, style: '' }); })(); </script> </body> </html>
另外还有异步加载模式，具体API请查看网址http://www.jcodecraeer.com/a/javascript/2016/1003/6656.html