Tooltip 指提示框,Popover 指弹出框使用标签文本换行问题

Tooltip 指提示框,Popover 指弹出框使用标签文本换行问题

  • 提示框
    • 官方写法

提示框

今天在使用Bootstrap的Tooltip功能时遇到个小问题:换行问题。显示的提示内容有两行,而且有序号1和2,最初想到的就是怎么简单怎么来;直接在title=" “或者是ata-content=” “里边直接放入”

1. 综合得分 = 固有风险得分 - 控制有效性得分

2.下降(绿标)表示综合得分较上次趋势向好

"文本或者换行符 \n ”,我也是这么做的,可惜这在Tooltip中不管用。Tooltip直接把””当作文字显示出来了。

官方写法

// tooltip.js
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over mea>
// popover.js
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框button>

我最初写法是

 <a tabindex="1" class="text-primary" role="button" data-toggle="popover" data-trigger="focus" data-content="

1. 综合得分 = 固有风险得分 - 控制有效性得分

2.下降(绿标)表示综合得分较上次趋势向好

"
>
<i class="fa fa-question-circle">i>a>h2>

显示如图
Tooltip 指提示框,Popover 指弹出框使用标签文本换行问题_第1张图片
html代码都显示出来了;这明显不是我们想要的效果。也就是说HTML在Tooltip中或是在data-content="“”没有起作用。好在我找到了data-html属性,可以使得在Tooltip中使用HTML,加上data-html="true"后换行起作用了,

<a tabindex="2" class="text-primary" role="button" data-toggle="popover" data-trigger="focus" data-html="true" data-content="

1. 综合得分 = 固有风险得分 - 控制有效性得分

2.下降(绿标)表示综合得分较上次趋势向好

"
>
<i class="fa fa-question-circle">i>a>

Tooltip 指提示框,Popover 指弹出框使用标签文本换行问题_第2张图片

这才是我们想要的效果;完美解决了问题;在此记录一下;方便下次遇到后查阅

Bootstrap tooltips and popovers

你可能感兴趣的:(javascript,前端,html,bootstrap)