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

这样的效果,怎么实现呢?
很简单
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();
【bootstrap】bootstrap中的tooltip的使用的更多相关文章
- Bootstrap 提示工具(Tooltip)插件
一.提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面. 有以下两种方式添加提示工具(tooltip): 1.通过data属性:如需添 ...
- bootstrap Table 中给某一特定值设置table选中
bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...
- Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...
- 在Bootstrap开发框架中使用Grid++报表
之前在随笔<在Winform开发中使用Grid++报表>介绍了在Winform环境中使用Grid++报表控件,本篇随笔介绍在Bootstrap开发框架中使用Grid++报表,也就是Web环 ...
- 在Bootstrap开发框架中使用dataTable直接录入表格行数据(2)--- 控件数据源绑定
在前面随笔<在Bootstrap开发框架中使用dataTable直接录入表格行数据>中介绍了在Web页面中使用Jquery DataTable插件进行对数据直接录入操作,这种处理能够给用户 ...
- 在Bootstrap开发框架中使用dataTable直接录入表格行数据
在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...
- 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理
在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...
- 使用BootStrap框架中的轮播插件
在使用bootstrap框架中的轮播插件时,效果做出来后,无法通过点击小圆行的按钮来选择特定的图片. 后面发现是最开始的<div>标签中少写了一个id.一开始<div>标签是这 ...
- 在Bootstrap框架中,form-control的效果
在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. 1.宽度变成了100% 2. ...
- bootstrap -- meta中的viewport指令
在查看bootstrap教程中,碰到 <meta name="viewport" content="width=device-width, initial-scal ...
随机推荐
- web安全测试---跨站点脚本测试
1.1 跨站脚本测试 1.1.1 GET方式跨站脚本测试 编号 SEC_Web_XSS_01 测试用例名称 GET方式跨站脚本测试 测试目的 由于跨站脚本会导致会话被劫持.敏感 ...
- getattr、setattr、hasattr
写一个演示类 class test(): title="验证getattr.setattr.hasattr方法" def run(self): return "run方法 ...
- Django模板导入和替换、以及对数据库的增加、查看
静态文件引入的3中方式:例如对html模板里面对css样式的引入 STATIC_URL = '/static666/'STATICFILES_DIR=[ os.path.join(BASE_DIR,' ...
- Model View Controller(MVC) in PHP
The model view controller pattern is the most used pattern for today’s world web applications. It ha ...
- API生命周期第二阶段——设计:如何设计API(基于swagger进行说明)
题外话 在新的项目中,推行了swagger用于对API的设计.以期待解决我们上篇博客中说到了一些现象,提升工作效率.那么,结合到当时和全项目组成员做培训,以及后续的给主要应用者做培训,以及当初自己接触 ...
- python学习笔记--python编程基础
一.一个隆重的仪式 我们在学习语言的时候,第一个写的程序肯定都是hello world.来写第一个程序吧,其实很简单,python的语法就是简单.优雅,一个print就搞定. 1 print('hel ...
- 2016 年 ACM/ICPC 青岛区域赛 Problem C Pocky
昨晚乱入学弟的训练赛,想了一下这个题.推导的过程中,加深了对公理化的概率论理解.$\newcommand{\d}{\mathop{}\!\mathrm{d}}$ 解法一 考虑 $ d < L$ ...
- BZOJ2653 middle 【二分 + 主席树】
题目 一个长度为n的序列a,设其排过序之后为b,其中位数定义为b[n/2],其中a,b从0开始标号,除法取下整.给你一个 长度为n的序列s.回答Q个这样的询问:s的左端点在[a,b]之间,右端点在[c ...
- 学习 WebService 第三步:一个简单的实例(RAD+WAS 8.5开发SOAP项目)
[开发环境] Web Service 服务器端开发工具:RAD(Eclipse内核) Web Service 服务器:IBM WebSphere v8.5 REST/SOAP:SOAP(JAX-WS/ ...
- 【BJOI2014/bzoj4530】大融合
题意 有 $n$ 个点,初始没有连边,要求支持两个动态操作: 1. 加一条边(保证之前两点不连通) 2. 查询过一条边的简单路径数量(就是两边连通块的大小的乘积) $n,Q\le 100000$ 题解 ...