任务2：工具提示框和
弹出框
项目七 Js组件
主讲人：赵丙秀
武汉软件工程职业学院
CONTENTS
01
02
工具提示框
弹出框popover
工具提示框
工具提示框
基本使用
<button type="button" class="btn btn-success"
data-bs-toggle="tooltip" data-bs-placement="top"
title="这是一个提示工具">
鼠标移动到此处查看效果
</button>
<script type="text/javascript">
('[data-bs-toggle="tooltip"]') .forEach(tooltip => {
new (tooltip) //激活工具提示组件
})
</script>
data-bs-toggle：声明为button添加触发类型。
data-bs-placement：设置提示工具的方向。
title：提示中显示的文字内容。
工具提示框
工具提示框的选项
选项 取值 含义
animation true（默认值）,false 是否显示tooltip组件显示和隐藏时的动画
delay number;object，默认值为0
显示和隐藏tooltip提示框的延迟时间，若分别设置显
示和隐藏的延迟时间，可以这么设置
{“show”:500,”hide”:200}
html true;false（默认值） 是否可以在tooltip提示框中插入HTML代码
placement String | function，默认值为‘top’ Tooltip提示框的方向
title String | element | function 如果title选项不存在，则提供原来title属性的提示文本
trigger
hover | focus | click | manual，默认值
为’hover focus’ 如何触发提示
offset array| string | function 默认值[0,0] 提示框对其目标的偏移
customClass string, function，默认为' '
当工具提示显示时，将类添加到工具提示中。要添加
多个类，请用空格将它们隔开：“class-1 class-2”。
如为传递一个函数，则该函数应返回包含类名的字符
串。
工具提示框
自定义样式
可以使用CSS变量自定义
工具提示的外观。添加data-bs
custom- class=“custom tooltip”
，custom-tooltip为一个自定义
类，重新给css变量赋值，覆
盖原有的css变量。
工具提示框
自定义样式
工具提示框
禁用元素的工具提示框
• 禁用元素无法交互，这意味着用户无法聚焦、悬停或单击它们来触
发工具提示（或弹出窗口）。
• 如果要为禁用元素设置提示工具，则需要将data-bs-toggle="tooltip"
放在禁用元素的父元素<div>或<span>中，同时在父元素中使用
tabindex="0"，是他可键盘获焦。
弹出框popover
弹出框popover
选项取值 取值 含义
animation true（默认值）,false 是否显示popover组件显示和隐藏时的动画
delay number;object，默认值为0
显示和隐藏popover弹出框的延迟时间，若分别设置显
示和隐藏的延迟时间，可以这么设置
{“show”:500,”hide”:200}
html true（默认值）;false 在popover弹出框中插入HTML是否自动隐藏toast组件
placement String | function，默认值为‘top’ popover弹出框的方向
title String | element | function popover标题。如没有，则为原来的title属性的内容
trigger
hover | focus | click | manual，默认
值为’click’
如何触发popover弹出框
content
string, element, function，默认值为
' '
popover的文本内容。
offset array| string | function 默认值[0,0] popover弹出框对其目标的偏移
弹出框popover
谢谢观看
《Web前端框架应用》课程
