【bootstrap】bootstrap中的tooltip的使用

简介: 先看看效果图:【当光标放在下面这个时间搜索框上时,显示一段文字:搜索时间段中的流水信息】这样的效果,怎么实现呢?很简单1.引入jQuery.js和bootstrap的js和css2.给想要有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();

 

相关文章
|
Web App开发 前端开发 JavaScript
|
前端开发 JavaScript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示
类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此。最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate、jquery.validate.unobtrusive、requirejs、Bootstrap,都是当前最/较新版本。
1119 0
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
66 0
|
前端开发 容器
|
前端开发 容器
|
前端开发 开发者 容器
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
前端开发
|
前端开发 JavaScript 容器