【bootstrap】bootstrap中的tooltip的使用-阿里云开发者社区

开发者社区> angel挤一挤> 正文

【bootstrap】bootstrap中的tooltip的使用

简介: 先看看效果图:【当光标放在下面这个时间搜索框上时,显示一段文字:搜索时间段中的流水信息】 这样的效果,怎么实现呢? 很简单 1.引入jQuery.js和bootstrap的js和css 2.给想要有tip提示框效果的元素添加下面后面三个属性 data-toggle 标明这个元素有tips这个...
+关注继续查看

先看看效果图:【当光标放在下面这个时间搜索框上时,显示一段文字:搜索时间段中的流水信息】

这样的效果,怎么实现呢?

很简单

1.引入jQuery.js和bootstrap的js和css

2.给想要有tip提示框效果的元素添加下面后面三个属性

<input type="text" class="form-control search-menu dateInput"   data-toggle="tooltip" data-placement="top" title="搜索时间段中的流水信息">
data-toggle 标明这个元素有tips这个效果
data-placement 标明tips这个效果在本元素的什么位置显示
title  标明tips元素显示些什么文本内容

 

3.js中绑定一下tooltip即可

//时间搜索框--鼠标悬浮事件
$(".dateInput").tooltip();

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7339 0
使用bootstrap-Validator校验表单
前端UI框架选择bootstrap,那么bootstrap-Validator作为表单校验是一个不错的选择。 以下内容前提是UI框架采用bootstrap。
1048 0
【android-tips】关于string.xml的使用
 (转载请注明出处:http://blog.csdn.net/buptgshengod)  1.介绍                   在制作android应用的时候,常常用到很多string,就是一些文字,这里介绍一种方法,将所有string封装在一个string.xml文件中,通过styles.xml控制string的大小等属性。在代码中,只要调用string的id即可。这
681 0
[Weex Tips] 合理使用 Weex 的生命周期
> 这是 Weex Tips 系列文章中的一篇,汇总目录在 [这里](http://www.atatech.org/articles/61714)。 + 首先建议先看一下有关组件定义的[官方文档](http://alibaba.github.io/weex/doc/references/component-defs.html),其中介绍了生命周期。 + 在 Weex 项目里有个 [
11467 0
【bootstrapValidator 不验证】使用bootstrapValidator 验证效果不起作用
虽然在页面ready的时候 就绑定了验证表单 ,但是在点击提交按钮之后 依旧没有验证的效果 。   那就在提交按钮的点击事件中 添加一句话: 1 $(document).ready( function () { 2 3 //为添加产品的表单加验证效果 4 $('#form-product-add').
2251 0
bootstrap-datetimepicker 的使用
          在web开发中,难免会用到时间选择控件,也正好也在使用bootstrap,所以就找到了bootstrap-datetimepicker 这个插件,下面把这个插件的使用记录一下,以做备忘。
1412 0
+关注
angel挤一挤
【任何0基础都能看懂的步骤和解决方法!】
340
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载