使用Bootstrap给特定连接显示Tooltip并修改样式和显示换行

在项目中,使用到了bootstrap中的tooltip,但是我不需要使用它的样式,并且文本显示的内容是需要换行的。

代码如下:

<p class="toc_title">
	目录 
	<span class="toc_toggle">
   [<a href="#">+</a>]
	<i data-toggle="tooltip" data-placement="right" title="文章内任意位置双击打开/关闭目录" class="toc_toggle_help iconfont zrz-icon-font-error" style="cursor:help;font-size: 0.8rem;margin-left: 2px;color: #F43;"></i>
	</span>
</p>

问题一:修改样式
tooltip的样式默认是黑背景白色字体,但是很多情况下我们都是需要改正的,tooltip涉及到的html代码就只有这些:

<div class="tooltip fade bottom in" role="tooltip" id="tooltip508853" style="top: 118px; left: 734.703px; display: block;">
    <div class="tooltip-arrow" style="left: 50%;"></div>//上边的三角形
    <div class="tooltip-inner">toggle</div>//显示的字体
</div>

我们知道html标签之后,要修改样式就比较简单了:

.tooltip-inner{
   background: #fafafa !important; //修改背景色
   text-align: left !important;//字体左对齐
   color:#363636 !important;//字体颜色
   border:1px solid #dedede;//添加boder
   max-width: 400px !important;//修改宽度
}
.tooltip-arrow{
   border-bottom-color: #ffffff !important;//修改三角形的颜色
   opacity: 0;//三角形透明
}
.tooltip{
   opacity: 1 !important;//让整个tooltip不透明
}

问题二:显示内容换行
一说换行就直接在需要换行的地方加上
,但是加上之后,发现没有什么用,
标签被直接显示出来了。后来百度了几把,找到了解决方案:HTMLTooltip中没有起作用,我们要让他起作用,需要在加上属性:data-html=“true”,这样title中的html标签才能起效。

data-toggle="tooltip" data-html=“true” data-placement="right"

 

本文短地址:
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论