Bootstarp 4 入门之Tooltips

Tooltips

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
  • data-toggle="tooltip" 触发
  • data-placement="top" 方向
  • title="Tooltip on top" 提示标题

    选项

    Name Type Default Description
    animation boolean true 将CSS淡入淡出过渡应用于工具提示
    container string | element | false false

    将工具提示附加到特定元素。范例:`container: 'body'`。此选项特别有用,因为它允许您将工具提示放置在文档流中靠近触发元素的位置-这样可以防止在调整窗口大小时工具提示从触发元素浮起。

    delay number | object 0

    延迟显示和隐藏工具提示(ms)

    delay: { "show": 500, "hide": 100 }

    html boolean false

    在工具提示中允许HTML

    placement string | function 'top'

    如何定位工具提示

    selector string | false false 如果提供了选择器,则工具提示对象将委派给指定的目标。实际上,这还用于将工具提示应用于动态添加的DOM元素
    template string '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

    创建工具提示时要使用的基本HTML。

    工具提示title将注入.tooltip-inner

    .arrow 将成为工具提示的箭头。

    最外层的wrapper元素应具有.tooltip类和role="tooltip"

    title string | element | function ''

    如果title属性不存在,则为默认标题值

    trigger string 'hover focus' 工具提示的触发方式: click | hover | focus | manual.
    offset number | string | function 0

    工具提示相对于其目标的偏移量。

    fallbackPlacement string | array 'flip' 允许指定Popper在回退时将使用的位置
    boundary string | element 'scrollParent' 工具提示的溢出约束边界。接受的值`'viewport'`,`'window'`,`'scrollParent'`,
    sanitize boolean true 启用或禁用清理。如果激活'template',则'title'选项将被清除。
    whiteList object Default value 包含允许的属性和标签的对象
    sanitizeFn null | function null 在这里您可以提供自己的清理功能。如果您更喜欢使用专用库来执行清理操作,这将很有用。
    popperConfig null | object null 要更改Bootstrap的默认Popper.js配置

    回调

    事件类型 描述
    show.bs.tooltip show调用实例方法时,将立即触发此事件
    shown.bs.tooltip 当工具提示对用户可见时将触发此事件(将等待CSS转换完成)​​。
    hide.bs.tooltip hide调用实例方法后,立即触发此事件
    hidden.bs.tooltip 当工具提示已向用户隐藏时将触发此事件(将等待CSS转换完成)​​。
    insert.bs.tooltip show.bs.tooltip当工具提示模板已添加到DOM时,会事件发生后触发此事件
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something...
})

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。