提示框（偶尔使用）<body><div class="container"><div class="row mt-5"><div class="col"><button class="btn btn-danger" data-toggle="popover" title="这里放的是提示框的标题" data-content="这里放的是提示框的内容">提示框</button><!-- 4个弹出方向 --><button class="btn btn-secondary" data-toggle="popover" title="这个提示框没有标题，并且是在上面显示" data-placement="top">上面显示提示框</button><button class="btn btn-info" data-toggle="popover" title="这个提示框没有标题，并且是在右侧显示" data-placement="right">右侧显示提示框</button><button class="btn btn-primary" data-toggle="popover" title="这个提示框没有标题，并且是在下面显示" data-placement="bottom">下面显示提示框</button><button class="btn btn-warning" data-toggle="popover" title="这个提示框没有标题，并且是在左侧显示" data-placement="left">左侧显示提示框</button><button class="btn btn-dark" data-toggle="popover" title="这个提示框当焦点失去的时候就会隐藏" data-trigger="focus">失去焦点隐藏</button><!-- 禁用元素弹出提示框 --><span class="d-inline-block" data-toggle="popover" data-trigger="hover" data-content="禁用的元素想要弹出提示框，需要在外面添加一层，把交互的功能都加到这个层上"><button class="btn btn-primary" style="pointer-events: none;" disabled>禁用的按钮弹出提示框</button>style="pointer-events: none;"，这条属性的表示现在这条元素它永远不能作为 触发元素，事件有冒泡和捕获，如果说，嵌套了一个层，你再次点击这时候就是这里面的这个层触发了这个事件，比如说onclick最终的事件源在button身上，所以说这个时候button被禁止了，不可能就弹出这个提示层了，所以我们就不用把它当做事件触发的源头了，那么这时候就会是span作为事件触发的源头了。这样就实现了这个禁用提示功能。</span></div></div><div id="box"></div><div class="row mt-5"><div class="col"><button class="btn btn-success" data-toggle="popover" title="这是<b>标题<b>" data-content="这是内容"data-animation="true" 打开提示框的时候有过渡的效果data-container='body' 这个提示框添加到了body标签里面了data-delay='{ "show": 1000, "hide": 2000 }' 这个是延迟时间data-html='true'就是将文字内的标签发挥作用data-placement='top' 提示框的位置data-template='<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' 了解就好data-trigger='hover' trigger就是一个触发的方式data-offset='120' 偏移>data-属性</button></div><!-- 方法与事件 --><div class="col"><button class="btn btn-info" title="方法与事件" id="myPopover">方法与事件</button></div></div></div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script><script>//初始化提示框，必需要写这一步$(function(){$('[data-toggle="popover"]').popover();});//方法//$('#myPopover').popover('show'); //显示提示框/* setTimeout(function(){$('#myPopover').popover('hide'); //隐藏提示框},1000); *//* $('#myPopover').popover('hide');$('#myPopover').popover('toggle'); //切换提示框 *///$('#myPopover').popover('enable'); //添加提示框功能$('#myPopover').popover('disable'); //取消提示框功能$('#myPopover').popover('toggleEnabled') //切换（enable与disable的功能）//事件$('#myPopover').on('show.bs.popover',function(){console.log('提示框要显示了');});$('#myPopover').on('shown.bs.popover',function(){console.log('提示框已经完全显示了');});$('#myPopover').on('hide.bs.popover',function(){console.log('提示框要隐藏了');});$('#myPopover').on('hidden.bs.popover',function(){console.log('提示框已经完全隐藏了');});$('#myPopover').on('inserted.bs.popover',function(){console.log('提示框DOM已经插入到页面里了');});</script></body>提示工具 也就是小气泡<body><div class="container"><div class="row mt-5"><div class="col"><button class="btn btn-secondary" data-toggle="tooltip" title="这个提示工具在上面显示" data-placement="top">上面弹出提示工具</button><button class="btn btn-info" data-toggle="tooltip" title="这个提示工具在右侧显示" data-placement="right">右侧弹出提示工具</button><button class="btn btn-primary" data-toggle="tooltip" title="这个提示工具在下面显示" data-placement="bottom">下面弹出提示工具</button><button class="btn btn-warning" data-toggle="tooltip" title="这个提示工具在左侧显示" data-placement="left">左侧弹出提示工具</button></div></div><div class="row mt-5"><p>Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.</p></div><div id="box"></div><div class="row mt-5"><!-- 自定义HTML --><div class="col"><button class="btn btn-success" data-toggle="tooltip" data-html="true" title="自<em>定</em>义<b>html</b>">自定义HTML</button></div><div class="col"><span class="d-inline-block" data-toggle="tooltip" title="禁用的元素弹出提示工具，需要在外面添加一个层，把交互的功能添加到这个层上"><button class="btn btn-primary" style="pointer-events: none;" disabled>禁用的按钮弹出提示工具</button></span></div><div class="col"><button class="btn btn-success" data-toggle="tooltip" title="这是<em>标题</em>"data-animation='true'data-container='body'data-delay='{ "show": 1000, "hide": 2000 }'data-html="true">data-属性</button></div><!-- 方法与事件 --><div class="col"><button class="btn btn-info" title="方法与事件" id="myTooltip">方法与事件</button></div></div></div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script><script>//初始化提示框，必需要写这一步$(function(){$('[data-toggle="tooltip"]').tooltip();});//方法/* $('#myTooltip').tooltip('show'); //显示提示框setTimeout(function(){$('#myTooltip').tooltip('hide'); //隐藏提示框},1000); *//* $('#myTooltip').tooltip('hide');$('#myTooltip').tooltip('toggle'); //切换提示框 */$('#myTooltip').tooltip('enable'); //添加提示框功能$('#myTooltip').tooltip('disable'); //取消提示框功能$('#myTooltip').tooltip('toggleEnabled') //切换（enable与disable的功能）//事件$('#myTooltip').on('show.bs.tooltip',function(){console.log('提示工具要显示了');});$('#myTooltip').on('shown.bs.tooltip',function(){console.log('提示工具已经完全显示了');});$('#myTooltip').on('hide.bs.tooltip',function(){console.log('提示工具要隐藏了');});$('#myTooltip').on('hidden.bs.tooltip',function(){console.log('提示工具已经完全隐藏了');});$('#myTooltip').on('inserted.bs.tooltip',function(){console.log('提示工具DOM已经插入到页面里了');});</script>
若有收获，就点个赞吧
0 人点赞
