开发者社区> 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();

 

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

相关文章
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示
类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此。最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate、jquery.validate.unobtrusive、requirejs、Bootstrap,都是当前最/较新版本。
987 0
bootstrap 组件之 进度条 滚动监控 旋转加载 消息推送框 组件学习总结
bootstrap 组件之 进度条 滚动监控 旋转加载 消息推送框 组件学习总结
63 0
bootstrap 组件之分页 提示框 提示工具组件
bootstrap 组件之分页 提示框 提示工具组件
69 0
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
34 0
bootstrap 组件 之模态框组件
bootstrap 组件 之模态框组件
38 0
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
bootstrap 组件之 输入框组 超大屏幕 列表组件学习总结
57 0
bootstrap 组件之表单 组件学习总结
bootstrap 组件之表单 组件学习总结
54 0
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
30 0
+关注
angel挤一挤
【任何0基础都能看懂的步骤和解决方法!】
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载