Bootstrap插件1--tooltip
在引入bootstrap.js之前我们需要引入jquery的js文件
既然是bootstrap的插件,那么自然需要引用bootstrap.js和bootstrap.css这2个核心文件了
这里了主要介绍tooltip提示信息插件的常用使用方法
<a href='javascript:;' rel='tooltip' title='我就是提示的信息' class='btn btn-primary'>点击出现提示信息</a>
调用方法:
<script>
$(function () {
$("a[rel='tooltip']").tooltip();
})
</script>
这样:tooltip的信息就自动显示在对应的元素的上方
那么,如果要让这个提示信息显示在其他地方呢?
很简单:
控制方位的属性是 data-replacement='?' ?可以是 top , bottom, left, right
<a href='javascript:;' rel='tooltip' data-original-title='Tooltip on bottom' data-placement='bottom' class='btn btn-primary'>点击出现提示信息</a>
顺便说一下:data-original-title属性和title属性作用是一样的,如果同时定义了这2个属性,只会显示title属性的提示内容。
Bootstrap插件1--tooltip的更多相关文章
- Bootstrap 提示工具(Tooltip)插件的事件
事件 下表列出了提示工具(Tooltip)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tooltip 当调用 show 实例方法时立即触发该事件. $('#m ...
- Bootstrap 提示工具(Tooltip)插件方法的用法
方法 下面是一些提示工具(Tooltip)插件中有用的方法: 方法 描述 实例 Options: .tooltip(options) 向元素集合附加提示工具句柄. $().tooltip(option ...
- Bootstrap -- 插件: 提示工具、弹出框、 警告框消息
Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...
- BootStrap插件
站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.js 文件.一些插件和 CSS 组件依赖于其他插件.如果您单独引用插件,请先确保弄清这些插件之间的依 ...
- 20个超棒的jQuery bootstrap 插件
1. Bootstrap File Input Bootstrap3.x 的一个增强版的HTML 5 文件选择控件,可以对图片文件和文本文件进行预览,以及其他功能.该插件增强了这些插件,并且将组件的初 ...
- bootstrap插件思路整理
知识有时也需温故知新嘛,本次做一次bs插件梳理. $.support.transition 通过判断自定义元素是否支持WebkitTransition.MozTransition.OTransitio ...
- Bootstrap插件的使用
昨天,我偶然间发现了它——BootStrap插件,它是一一套功能强大的前端组件.说起来,我跟这插件还真算得上有缘,我本来并不是去找这个插件的,我本来是找BootStarp Paginator这个分页插 ...
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式
Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...
随机推荐
- aidl 中通过RemoteCallbackList 运用到的回调机制: service回调activity的方法
说明:我没有写实例代码,直接拿项目中的代码,有点懒了,这里我省略贴出两个aidl文件. TtsService extends Service private final RemoteCallbackL ...
- javascript字典数据结构常用功能实现
必知必会啊. function Dictionary(){ var items = {}; this.has = function (key) { return key in items; }; th ...
- 利用phpexcel把excel导入数据库和数据库导出excel实现
<?php ); ini_set(,,,date(,date(,,,date(,,,date(,date(,,,date() ->setCellValue();); $objPHP ...
- hdu 1756 判断点在多边形内 *
模板题 #include<cstdio> #include<iostream> #include<algorithm> #include<cstring> ...
- CC2540开发板学习笔记(五)——串口通信
(一)串口发送 一.实验现象: 开发板实现功能发送 二.实验过程 1.PL2303 USB转串口电路图 2.串口发送 (1)查看用户手册有: UART0 对应的外部设备 IO 引脚关系为: P0_2 ...
- 我与C++的不解情缘
我是一个老实人,我当时报考C++真的全心是为了自己自考的免考,绝不是为了什么二级证,可是,进行到一半的时候,突然获悉,C++自我们这次开始,不作为免考科目了,当时我的心里啊,那个纠结,那个痛啊,随后, ...
- BZOJ3679 : 数字之积
设f[i][p2][p3][p5][p7][j][k]表示前i位,2,3,5,7的次数,前i位是否等于x,是否有数字的方案数 然后数位DP即可,ans=cal(r)-cal(l) #include&l ...
- 一份spring配置文件及其详解
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/axu20/archive/2009/10/14/4668188.aspx 1.基本配置:<?xml versio ...
- 解决xubuntu的thunar第一次启动慢
装了Xubuntu后,一直都挺好,只不过就是有一个问题老困扰我,就是每次开机打开thunar都是极慢的.... 一直没注意,原来也一直找不到问题,后来今天一搜,唷呵...找到了. 解决方法 thuna ...
- linux rootfs制作
http://blog.sina.com.cn/s/blog_6795385f01011ifg.html 作一个嵌入式Linux rootfs,并且实现 web 服务 1. 文件系统简介 •理论上说一 ...