• 轻松创建一个漂亮的工具提示。
  • 要应用这个组件，需要为某个元素添加 data-toggle="tooltips" 属性。你还需要添加一个 title 属性，它的值即是提示文本。
实例


钱途互联官网


Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.


Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, attr, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.


Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.


广东钱途互联商务服务有限公司 （以下简称“钱途互联”）

广东省广州市天河区
体育西路109号高盛大厦8层
tel: 020-61847588
            
<a href="#" class="link-standard" data-toggle="tooltips" title="钱途互联是国内首家专注于通过互联模式">钱途互联官网</a>
  • tooltips提供了位置，动画，高亮等配置参数
  • 可通过data-*进行初始化配置,其中*代表参数名
实例
参数 类型 默认值 描述
offset Number 9 与元素之间的偏移量
pos String top tooltips位置类型
animation boolean true 是否启用淡入动画
delay Number 0 显示间隔时间 ms
cls String '' 显示元素高亮类
url String '' 异步加载内容地址 
            
<a href="#" class="link-standard"
data-toggle="tooltips"
title="钱途互联是国内首家专注于通过互联模式"
data-offset="10"
data-*...
>钱途互联官网</a>
  • 提供了9宫图方位配置,使用data-pos属性进行配置。
实例
参数 描述 示例
data-pos="top" 对齐顶部居中
data-pos="top-left" 对齐左上
data-pos="top-right" 对齐右上
data-pos="bottom" 底部居中
data-pos="bottom-left" 左下对齐
data-pos="bottom-right" 右下对齐
data-pos="left" 左对齐
data-pos="right" 右对齐 
            
<button type="button" data-toggle="tooltips" title="Hover me long ...." data-pos="bottom" class="btn default small-btn">Hover me</button>
  • 我们可以对表单元素添加tooltips来提醒文本框填写的注意事项。
实例
            
<input type="text" class="form-control" data-toggle="tooltips" title="邮箱作为登录的唯一用户名" data-pos="bottom-left">
  • tooltips需要异步加载内容，须配置data-url=""属性,url的值参照jquery的 load 方法, 而且 title 属性作为加载前的提示文字
实例
            
<input type="text" class="form-control" data-toggle="tooltips"  title="loading..." data-url="./pages/placeholder.html" data-pos="bottom-left" da>