ToolTips提示符

用法

轻松创建一个漂亮的工具提示。

要应用这个组件，需要为某个元素添加 data-toggle="tooltips" 属性。你还需要添加一个 title 属性，它的值即是提示文本。

鼠标滑过 鼠标经过 

                        
                            <a href="#" class="btn default" data-toggle="tooltips" title="看这里！粗线了">鼠标滑过</a>
                        
                    

                        
                            <a href="#" data-toggle="tooltips" title="看这里！粗线了">鼠标滑过</a>

文本框 

                        
                            <div class="form-group">
                            

                            <label for="" class="form-control-label"><span>邮箱：</span></label>
                            

                            <input type="text" class="form-control" style="width:200px;" data-toggle="tooltips" data-pos="right" title="请输入邮箱"  />
                            </div>

对齐

添加下列选项之一到 data-tooltip 属性中来调整提示组件的文本对齐方式。

属性 描述 示例
pos:'top' 将提示组件对齐到顶部。
pos:'top-left' 将提示组件对齐到左上。
pos:'top-right' 将提示组件对齐到右上。
pos:'bottom' 将提示组件对齐到底部。
pos:'bottom-left' 将提示组件对齐到左下。
pos:'bottom-right' 将提示组件对齐到右下。
pos:'left' 将提示组件对齐到左侧。
pos:'right' 将提示组件对齐到右侧。 
                                
                                    <button class="btn default" data-toggle="tooltips" title="Hover me">Hover me</button>

参数配置

选项 可用的值 默认值 描述
offset int 9 与源元素之间的偏移量
pos string 'top' 工具提示组件定位
animation boolean true 工具提示的淡入动画
delay int 0 提示组件延迟显示多少毫秒
cls string '' 自定义类，用来添加显示/Custom class to add on show