文本描述:
data-content:内容部分
data-placement:弹出框的位置
data-html:解析代码 true false
data-animation:是否有过渡 true false
data-delay:弹出框的延迟时间
data-template:自定义弹出框
data-trigger:触发方式 click fouce hover
方法:
popover() tooltip()
方法里的值:show展开,隐藏hide,切换toggle
<span title="文字描述" data-toggle="tooltip">提示工具</span>
<button
title="这是弹出框的提示"
data-toggle="popover"
data-content="弹出框的内容部分<input type='text' id='input'data-toggle='tooltip' title='弹出框里的弹出框'>"
data-placement="bottom"
data-html="true"
data-animation="false"
data-delay="1000"
data-trigger="hover"
id="popover">
弹出框</button>
<script>
//必须初始化
$("[data-toggle='tooltip']").tooltip()
$("[data-toggle='popover']").popover()
$("#popover").on('shown.bs.popover',function(){
$('#input').focus();
$('[data-toggle="tooltip"]').tooltip();
})
</script>
扩展一个自己制作的提示框:
html:
<span title="" datat-my-tooltip="提示工具" data-el="myTooltip">自制提示工具</span>
script:
var $myTooltip = $('[data-el="myTooltip"]')
$myTooltip
/*
attr:操作属性节点('第一个参数 获取属性对应的值''第二个参数 设置属性的值')
hover ('第一个参数 鼠标移入' '第二个参数 鼠标移出')
wrap 给元素外层包裹一个容器
after 后面插入一个容器
remove 移出节点
replaceWith 替换节点
*/
.attr('datat-my-tooltip',$myTooltip.attr('title'))
.attr('title','')
.hover(function(){
console.log("移入")
$(this)
.wrap('<div class="tooltip-outer"></div>')
$(this).after('<div class="tooltip-box" id="tooltip-box">插入的</div>')
},function(){
$('#tooltip-box').remove();
$('.tooltip-outer').replaceWith($myTooltip)
console.log("移出");
})
本文只是简单的介绍,希望本文能帮到你。
如不理解或者想要更深了解,请查询官网。