文档章节

4.19、Bootstrap V4自学之路-----内容---提示冒泡

Asktao
 Asktao
发布于 2016/03/25 16:42
字数 1586
阅读 192
收藏 1

我一直没有调试出来,包裹引入tether.min.js仍然无法出发效果。

mark着,回头再看。先熟悉文档。

概述

在使用提示冒泡插件的时候你需要知道这些:

  • 提示冒泡依赖第三方库Tether实现定位。你必须在bootstrap.js之前调用 tether.min.js,才能使提示冒泡起作用。

  • 出于性能的原因,提示冒泡是选择性加入的,所以你必须自己初始化它们

  • 标题零长度的提示冒泡不会显示出来。

  • 指定container: 'body'以避免复杂组件(比如说输入框组,按钮组,等等)中的渲染问题。

  • 在隐藏的元素上触发的提示冒泡不会起作用。

  • 如果从一个跨多行的链接上触发提示冒泡,提示冒泡将居中。在<a>上使用white-space:nowrap;可以避免这种情况。

示例:在任何地方启用提示冒泡

在网页上初始化所有的提示冒泡的一个途径是用data-toggle属性选中它们:

$(function () {
   $('[data-toggle="tooltip"]').tooltip() 
})

示例

我出不来效果。


    静态演示

哎。

    互动演示

尴尬。


用法

提示冒泡插件根据需要生成内容和标记,默认将提示冒泡放在触发元素后面。

利用JavaScript触发提示冒泡:

$('#example').tooltip(options)

    标记

如果你想要一个提示冒泡,只有HTML元素中的data属性和title属性是必不可少的标记。提示冒泡生成的标记很简单,虽然它确实需要一个位置(默认情况下被插件设置为顶部)。

<br>
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

话虽如此,但不出效果。

选项

可以利用data属性或者JavaScript传递选项。如果用data属性,请把选项名追加到data-后面,比如说写成data-animation=""

名称 类型 默认值 描述
animation boolean true 对提示冒泡应用一个CSS褪色过渡
container string | false false

向一个特定元素追加提示冒泡。示例:container: 'body'。这个选项在某些时候特别有用,比如说它允许你在文档流中在触发元素附近定位提示冒泡--这将防止在窗口调整大小的时候,提示冒泡飘到远离触发元素的位置。

delay number | object 0

延迟显示或延迟隐藏提示冒泡(以毫秒计)——它不会应用到人为触发类型。

如果向这个选项提供一个数字,显示和隐藏都会应用这个延迟。

对象结构是delay: { "show": 500, "hide": 100 }

html boolean false 向提示冒泡插入HTML。如果值为false,将使用jQuery的text方法向DOM插入内容。如果你担心跨站脚本攻击的话,请使用text。
placement string | function 'top'

如何定位提示冒泡:`top`、 `bottom`、`left`、`right`、`auto`。
如果指定了`auto`,它会动态地调整提示冒泡的位置。举个例子,如果placement是`auto left`,提示冒泡将尽可能地显示在左侧,否则显示在右侧。

如果用一个函数来决定placement,会调用提示冒泡的DOM节点作为第一个参数,然后触发元素的DOM节点是第二个参数。this的上下文设置为提示冒泡的实例。

selector string false 如果提供了一个选择器,提示框将被委派给指定的目标。在实践中,它让动态添加的HTML内容也能附加提示框。看这里一个翔实的例子
template string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

在创建提示冒泡时使用HTML。

提示冒泡的title将注入到.tooltip-inner里面。

.tooltip-arrow将变成提示冒泡的箭头。

最外层的包裹元素必须拥有.tooltip类。

title string | function ''

如果title属性不存在,提供默认的title值。

如果提供了一个函数,调用这个函数时,函数的this引用被设置为附加提示冒泡的元素。

trigger string 'hover focus' 如何触发提示冒泡——`click`、`hover`、`focus`、`manual`。你可以传递多个触发器,用空格隔开它们。但是`manual`不能用别的触发器结合使用。
constraints Array 'hover focus' 一个约束数组,传递给Tether。欲知更多请查询Tether的约束文档
offsets string '0 0' 提示冒泡相对于目标的偏移,欲知更多请查询Tether的偏移文档

方法

$().tooltip(options)

对一个元素集附加一个提示冒泡处理程序。

 .tooltip(‘show’)

显示一个元素的提示冒泡。在提示冒泡真正显示之前返回给调用者(也就是,在shown.bs.tooltip事件发生之前)。这被视为提示冒泡的一次“人为”触发。零长度标题的提示冒泡不会显示。

$('#element').tooltip('show')

.tooltip(‘hide’)

隐藏一个元素的提示冒泡。在提示冒泡真正隐藏之前返回给调用者(也就是,在hidden.bs.tooltip事件发生之前)。这被视为提示冒泡的一次“人为”触发。

$('#element').tooltip('hide')

.tooltip(‘toggle’)

切换一个元素的提示冒泡。在提示冒泡真正显示或隐藏之前返回给调用者(也就是,在 shown.bs.tooltiphidden.bs.tooltip事件发生之前)。这被视为提示冒泡的一次“人为”触发。

$('#element').tooltip('toggle')

.tooltip(‘destroy’)

隐藏并销毁一个元素的提示冒泡。使用委派的提示冒泡(创建时使用了selector选项)不能在后代触发元素上被单独销毁。

$('#element').tooltip('destroy')

事件

事件类型 描述
show.bs.tooltip 当调用show实例方法时,会立即触发该事件。
shown.bs.tooltip 当提示冒泡对用户来说可见时(需要等待CSS过渡完成),会触发该事件。
hide.bs.tooltip 当调用hide实例方法时,会立即触发该事件。
hidden.bs.tooltip 当提示冒泡对用户来说终于完成隐藏时(需要等待CSS过渡完成),会触发该事件。
$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something…  
})

吐血!!为什么不触发呢?

© 著作权归作者所有

Asktao
粉丝 27
博文 100
码字总数 116095
作品 0
丰台
程序员
私信 提问
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
440
0
4.2、Bootstrap V4自学之路------组件---按钮组

1、基本示例 用把一系列带有的按钮包裹起来。 <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button ......

Asktao
2016/03/23
72
0
4.20、Bootstrap V4自学之路-----内容---提示框

我预计要歇菜,mark! 概述 在使用提示框插件的时候你需要知道这些: 提示框依赖第三方库Tether实现定位。你必须在bootstrap.js之前调用 tether.min.js,才能使提示框起作用。 提示框需要依赖...

Asktao
2016/03/25
153
0
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
157
1
1.1、Bootstrap V4自学之路------起步---介绍

如果快速建立bootstrap V4模板 DEMO敬上: <!DOCTYPE html><html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" conten......

Asktao
2016/01/25
178
0

没有更多内容

加载失败,请刷新页面

加载更多

Excel创建数据透视表:优点·数据汇总速度快

· 创建数据透视表: 插入选项卡------>数据透视表 1.可自由选择区域, 可选择是展示在本表还是其他表 2. 数据透视表布局展示: 3.行标签:展示数据类 ; 计数项:如果选择区域是文本展示的是...

东方墨天
14分钟前
2
1
Linux 分区内存扩充(centos7)

我的为例: df -h 查看当前系统磁盘使用状况,发现 根(/)目录即将满盘:如下图 我要做的就是把挂载点为 / 的分区在不影响原有数据的情况下增加可用空间! 1、首先在虚拟机上扩充“物理空间...

东方神祇
昨天
1
0
docker的使用

一、起名Dockerfile没有后缀名的文件,编辑如下指令 # Pull base image FROM java:8 VOLUME /tmp# 添加 ADD spring-provider-1.0-SNAPSHOT.jar app.jarRUN bash -c 't...

BobwithB
昨天
1
0
聊聊nacos的NacosDiscoveryAutoConfiguration

序 本文主要研究一下nacos的NacosDiscoveryAutoConfiguration NacosDiscoveryAutoConfiguration nacos-spring-boot-project/nacos-discovery-spring-boot-autoconfigure/src/main/java/com/a......

go4it
昨天
10
0
如何保证消息的顺序性?

面试题 如何保证消息的顺序性? 面试官心理分析 其实这个也是用 MQ 的时候必问的话题,第一看看你了不了解顺序这个事儿?第二看看你有没有办法保证消息是有顺序的?这是生产系统中常见的问题...

米兜
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部