BootStrap tooltip提示框使用小结_javascript技巧

提示框

提示框的基本使用方式为:

复制代码 代码如下:

<span data-toggle="tooltip" data-original-title="this is alert content">test message</span>

  data-original-title可以直接写为title,仍然能正常使用,源码中优先查找前者,前者不存在就会查找title

提示框不提供HTML触发方式只能通过JS来进行触发:

$("[data-toggle='tooltip']").tooltip();

  提示框的关键属性为data-original-title="content",该属性就是我们要提示的信息,如果不存在该属性则回去检索title属性,title的属性值同样可以用来显示

  由于提示框只能通过JS来进行触发,而且data-toggle在BootStrap中就是一个说明功能的属性,所以通常提示框的元素上都会设置data-toggle="tooltip",这只是为了可以选中这个DOM节点,也可以设置为class="xx"

  提示信息默认是在元素上边显示的我们可以通过属性data-placement来进行更改,它有五个值分别为top、bottom、left、right、auto,如果设置为data-placement="auto"则选择适当的位置显示提示信息

  提示框提供的剩余的几个属性分别为

  1.data-animation在提示信息上应用一个fade动画,默认值为true

  2.data-html可以将HTML作为提示语,默认值为false

  3.data-selector如果声明selector表示的元素就可以提示信息

  4.data-trigger通过什么方式来触发提示信息,默认值为focus、hover,全部值为focus、hover、click、manual可以使用多种出发方式,使用多种时中间以空格隔开

  5.data-delay延迟提示信息默认值为0

  6.data-container将提示信息放在执行的元素上,默认为false,当在.btn-group和.input-group内使用提示信息是要设置为data-container="body"

  7.data-template提示语的默认模板

JS使用

  tooltip提供了四个参数分别为:show、hide、toggle、destory分别对应显示、隐藏、切换、销毁

使用方式为:

$("[data-toggle=tooltip]").tooltip("show")

  tooltip同样提供了四个事件分别为:

  1.show.bs.tooltip在显示之前触发

  2.shown.bs.tooltip在显示之后触发

  3.hide.bs.tooltip在隐藏之前触发

  4.hidden.bs.tooltip在隐藏之后触发

使用方式为:

$("[data-toggle=tooltip]").on("show.bs.tooltip",function(){})

  tooptip提供的参数对象属性就是前面的集中在使用时去掉"data-"即可

  基本的使用方式都很简单,这里介绍一个selector的用法,该属性一般用在新添加的元素仍然需要显示提示框的场景中,所以在使用时要在提示框的父级上绑定提示框的调用方法,事件源是selector的DOM可以触发事件,使用的就是冒泡的思想使用方式为:

$("element").tooltip({
 selector:".className"
})

  当在.btn-group和.input-group内的元素使用tooltip时要设置container:"body"避免不必要的副作用。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程
Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap
, tooltip
提示框
bootstrap tooltip、bootstrap tooltip.js、bootstrap动态tooltip、bootstrap的tooltip、bootstrap2 tooltip,以便于您获取更多的相关知识。

时间: 2024-08-22 08:55:57

BootStrap tooltip提示框使用小结_javascript技巧的相关文章

JS组件Bootstrap实现弹出框和提示框效果代码_javascript技巧

前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

使用 bootstrap modal遇到的问题小结_javascript技巧

bootstrap提供了一个写好的css文件和js文件然而在使用时遇到了一下并不是很好的问题,今天在使用弹出对话框时遇到了一个这样的问题 上述代码 <a class="btn" data-toggle="modal" href="#myModal" data-keyboard="false" data-backdrop="true" >点击"无ESC关闭,无遮蔽背景"演示&l

JS实现刷新父页面不弹出提示框的方法_javascript技巧

本文实例讲述了JS实现刷新父页面不弹出提示框的方法.分享给大家供大家参考,具体如下: A页面 open方式出 B页面 ,当B页面做了类如保存动作后,需要关闭B页面,刷新A页面的情况下,会弹出一个提示框,要求点重试,这个就是发生预料之外的情况,用户体验很差. 解决方案分两种情况: 1.A页面很简单的情况(没有frame/iframe) 在B页面中的function中: function close(){ window.opener.location.reload(); window.opener

js右下角弹出提示框示例代码_javascript技巧

本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>网页右下角的信息框</title> </head> <style type="text/css"> #winpop { width:200px;

js实现右下角提示框的方法_javascript技巧

本文实例讲述了js实现右下角提示框的方法.分享给大家供大家参考.具体实现方法如下: 实现右下角提示框的Jquery插件 (popup.js) 复制代码 代码如下: //兼容ie6的fixed代码   //jQuery(function($j){  //    $j('#pop').positionFixed()  //})  (function($j){      $j.positionFixed = function(el){          $j(el).each(function(){ 

JS实现定时自动关闭DIV层提示框的方法_javascript技巧

本文实例讲述了JS实现定时自动关闭DIV层提示框的方法.分享给大家供大家参考.具体分析如下: 这里用JS设定时间去控制指定ID的DIV层是否显示,可以实现一个自动关闭的提示框,时间一到,马上关闭,这样会使你的网页更人性一点,代码其实比你想像的还要简单,就一行代码. <title>自动关闭的DIV层</title> <body onLoad=setTimeout("abc.style.display='none'",5000)> <div id=

BootStrap modal模态弹窗使用小结_javascript技巧

模态弹窗 触发元素基本结构: 复制代码 代码如下: <button class="btn btn-success" data-target="#modal" data-toggle="modal">modal</button> 内容元素基本结构: <div class="modal fade" id="modal"> <div class="modal-d

Select2.js下拉框使用小结_javascript技巧

用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要好看一些,本文针对新版本. 官网:http://select2.github.io/ 演示: 由于博客系统的原因,所以只能演示简单的功能. 一.文件需要引入select2.full.js.select2.min.css(4.0.1版本)和jquery.1.8.3及以上 最新版本

有没有人能解决tooltip提示框只出现一次的问题

问题描述 有没有人能解决tooltip提示框只出现一次的问题 预期的效果为点击不同的地方都会显示提示框,但是现在只要点击下一个地方,上一个地方的提示框就不在显示,比方说有a,b,c三个地方,一直点击a的话会一直不断显示,但只要点击了b,a就不在显示了,点击了c,a和b就不在显示了 解决方案 解决ToolTip 只显示一次问题