bootstrap tooltip样式修改

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}

bootstap tooltip 提示框支持上、下、左、右四个方向展示，注意它依赖jQuery，另外引入 bootstrap.css 样式和 bootstrap.js 脚本即可。更详尽的介绍请查看bootstrap文档中的JavaScript插件。