首页 > Web技术 > bootstrap tooltip样式修改

bootstrap tooltip样式修改

分享 bootstrap tooltip 提示框的使用,在使用 bootstrap tooltip 制作提示框的过程中可能遇到 CSS 样式需要调整,其中涉及到一个 bootstrap tooltip 文字被遮住的 CSS 样式修改。

分享 bootstrap tooltip 提示框的使用,在使用 bootstrap tooltip 制作提示框的过程中可能遇到 CSS 样式需要调整,其中涉及到一个 bootstrap tooltip 文字被遮住的 CSS 样式修改。

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 tooltip提示框样式问题
bootstrap tooltip提示框样式问题

bootstrap.css 文件中找到.tooltip-inner可以看到设置了max-width属性:

bootstrap tooltip提示框样式代码
bootstrap tooltip提示框样式代码
/*在public样式表,写入自定义css样式覆盖前面的css样式*/
.tooltip .tooltip-inner{max-width:100%;text-align: left}
bootstrap tooltip提示框样式修改
bootstrap tooltip提示框样式修改后

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

相关分享

发表评论