Bootstrap入门(二十八)JS插件5:工具提醒

工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题。

我们来写一个简单的实例

先引入CSS文件和JS文件

        <link href="bootstrap.min.css" rel="stylesheet">
        <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>

创建一个容器div,在里面创建一个指定样式的<p>元素和内容

然后在内容中前台<a>标签,指定data-toggle="tooltip",空标题title="",

他的位置data-placement="XXX"(XXX这里是指放在哪里)

data-original-title="www.xxxxxx.com"是指显示的是内容

注意这里给了<a>标签id

        <div class="container">
<p class="muted" style="margin-bottom:0">
hello world buttom<a id="mytooltip" href="#" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="www.xxxxxx.com">xxx</a>
<br>
hello world left<a id="mytooltip" href="#" data-toggle="tooltip" title="" data-placement="left" data-original-title="www.xxxxxx.com">xxx</a>
<br>
hello world right<a id="mytooltip" href="#" data-toggle="tooltip" title="" data-placement="right" data-original-title="www.xxxxxx.com">xxx</a>
</p>
</div>

当然,现在是还没有效果的,我们需要添加js代码

“”(这是一个初始化)

        <script>
$('[data-toggle="tooltip"]').tooltip();
</script>

现在就可以了

(注意:如果<a>标签里面title属性是有内容的,则显示title内的内容,如果是空则显示我们给的)

点击第一个,在下方的(这是有一个淡入淡出的效果的)

第二个第三个,分别在左边和右边的

但是有时候,我们是希望这个工具提示是一直存在在页面上的,我们可以这样

添加内容

                 hello world right<a id="mytooltip2" href="#" data-toggle="tooltip" title="" data-placement="right" data-original-title="www.xxxxxx.com">xxx</a>

修改js代码

        <script>
$("#mytooltip2").tooltip("show");
</script>

打开页面,发现已经存在在了(不用点击)

事件的执行也是可以的

有四种情况

显示前,显示后,隐藏前,隐藏后

这里试一下隐藏后

添加内容

                 hello world right<a id="mytooltip3" href="#" data-toggle="tooltip" title="" data-placement="right" data-original-title="www.xxxxxx.com">xxx</a>

修改js代码

为简单,当提示消失/隐藏后,他执行的内容就是弹出一个提示框

        <script>
$("#mytooltip3").on("hidden.bs.tooltip",function(e){
alert("hello");
});
</script>

刷新页面,点击或者鼠标滑过使提示出现后,移开,让提示消失,这里就弹出提示框

Bootstrap入门(二十八)JS插件5:工具提醒的更多相关文章

  1. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  2. Bootstrap入门(十八)组件12:徽章与巨幕

    Bootstrap入门(十八)组件12:徽章与巨幕 1.徽章 2.巨幕 1.徽章 给链接.导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展 ...

  3. 九月二十八JS验证

    js表单验证 js可用发来在数据被送往服务器前对HTML表单中的这些输入数据进行验证 被js验证的这些典型的表单数据有: >用户是否已填写表单中的必填项目: >用户输入的邮件地址是否是合法 ...

  4. 二十八、rsync同步工具深入

    1.将rsync服务加入到自启动文件rc.local echo "/usr/bin/rsync --daemon" >>/etc/rc.local tail -l rc ...

  5. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  6. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  7. Bootstrap <基础二十五>警告(Alerts)

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  8. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

  9. Bootstrap <基础二十二>超大屏幕(Jumbotron)

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

  10. Bootstrap<基础二十> 标签

    Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...

随机推荐

  1. HDU 5487 Difference of Languages(BFS)

    HDU 5487 Difference of Languages 这题从昨天下午2点开始做,到现在才AC了.感觉就是好多题都能想出来,就是写完后debug很长时间,才能AC,是不熟练的原因吗?但愿孰能 ...

  2. Fox And Names

    Description Fox Ciel is going to publish a paper on FOCS (Foxes Operated Computer Systems, pronounce ...

  3. java多线程有几种实现方法,都是什么?同步有几种实现方法,都是什么?

    多线程有两种实现方法,分别是继承Thread类与实现Runnable接口 同步的实现方面有两种,分别是synchronized,wait与notify 先看一下java线程运行时各个阶段的运行状态 j ...

  4. PAT (Advanced Level) 1024. Palindromic Number (25)

    手动模拟加法高精度. 注意:如果输入数字的就是回文,这个时候输出0步. #include<iostream> #include<cstring> #include<cma ...

  5. @media max-width 与jquery宽度取值的差异

    最近写了个响应式网站,有些效果通过用jq的$(window).width()来判断屏幕宽度,当屏幕宽度小于1366时一些参数发生变化.@media中也有小于1366的判断条件,但是用起来的时候发现一个 ...

  6. ruby, gem install 出现网络错误

    gem sources #查看目前的源 gem sources --remove https://rubygems.org/ gem sources -a https://ruby.taobao.or ...

  7. mac ox 配置java和maven

    参考http://www.cnblogs.com/iOS-mt/p/5726380.html 以及http://blog.csdn.net/done58/article/details/5113805 ...

  8. 通过条件注释<!--[if IE]><!-->判断浏览器

    有时我们会在网站头部看到: <!--[if IE 7]> <![endif]--> 或者 <!--[if lt IE 9]> <![endif]--> ...

  9. (译)Windsor入门教程---第四部分 整合

    介绍:     目前为止,已经介绍了应用程序的各个部分.首先是添加了Windsor程序集,然后是添加了控制器工厂,还添加了installer类来注册控制器.虽然但是我们还没用在应用程序中调用他们.在这 ...

  10. Linux下gcc编译生成动态链接库*.so文件并调用它 是转载的

    动态库*.so在linux下用c和c++编程时经常会碰到,最近在网站找了几篇文章介绍动态库的编译和链接,总算搞懂了这个之前一直不太了解得东东,这里做个笔记,也为其它正为动态库链接库而苦恼的兄弟们提供一 ...