bootstrap tooltip 提示框布局在网页上很漂亮。 bootstrap tooltip 的使用也很简单,不过还是为前端新手简单介绍下。
HTML结构代码
<link rel="stylesheet" href="bootstrap.css"><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="bootstrap.js"></script><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button><script type="text/javascript">$(function () { $('[data-toggle="tooltip"]').tooltip()})</script>
有关 bootstrap tooltip 提示框更详细的使用方法请参阅bootstrap文档。
bootstrap tooltip 提示框样式显示问题
bootstrap.css 文件中找到.tooltip-inner可以看到设置了max-width属性:
/*在public样式表,写入自定义css样式覆盖前面的css样式*/.tooltip .tooltip-inner{max-width:100%;text-align: left}