收集bootstrap的几个常用用法---tooltip提示框

看到的原网址：http://www.cnblogs.com/dk1988/p/3670561.html

详细的bootstrap网址可以去这看：  http://www.runoob.com/bootstrap/bootstrap-tutorial.html

bootst确实比较好用，不过官网的手册不是很详细，现自己收录好例子，倒是直接粘贴到项目中

1，提示框功能，此功能常用，自己写比较浪费功夫

最基本例子如下，上下左右的提示

<ul class="example" style="list-style:none;">
<li>
<a class="atip" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</a>
</li>
<li>
<a href="#" class="atip" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</a>
</li>
<li>
<a href="#" class="atip" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</a>
</li>
<li>
<a href="#" class="atip" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</a>
</li>
</ul>

<script>
$(function(){
$(".atip").tooltip();

});
</script>

tooltips官方提供了很多参数，使用方法如下

<script>
$(function(){
$(".atip").tooltip();
options={
delay: { show: 500, hide: 100 },
trigger:'click',
};
$(".optiontip").tooltip(options);
});
</script>

有delay，tigger等等参数

 

还有个差不多的叫popover，样子是两层提示，一个标题，一个提示

格式如下，参数完全一样，多个content

<a class="btn  btn-success"  id='pop' type="submit" rel="popover" title="泡芙提示" data-content="泡芙提示泡芙提示">  泡芙提示泡芙提示泡芙提示</a>

<script>
$(function(){
$('#pop').popover();
});
</script>