1. Realize the effect
2. The pit of the realization process
1. Dynamically adding tooltip does not take effect
Since the content of the bullet box and the data displayed by the swipe are all dynamically rendered, the original writing method does not take effect, and a solution is needed
// 动态添加的元素 不生效
// $("[data-toggle='tooltip']").tooltip();
// 动态添加的元素 生效
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
});Reference article:
The element tooltip dynamically added by Bootstrap3 does not take effect_bootstrap tooltip dynamic invalid_Xiuqiang's Blog-CSDN Blog
2.tooltip does not support newline
Solution 1:
(I tried this method at the beginning, but it was not perfect. The back-end data returns a newline character with \n, which can be displayed correctly by modifying the label pre, but modifying the Js source code will affect other pages; so the method 2 is directly adopted, written below, and can be controlled directly through css.)
Reference article: bootstrap Tooltip newline problem
Bootstrap itself has a tooltip, which is very convenient to use, but the fly in the ointment is that its tooltip does not support line breaks.
For example, the long text we pass into the database through the <textarea> input box has line breaks, but once it is displayed using tooltip, the line break effect will disappear.
Actually, it's not that hard to solve.
In bootstrap.js, query the tooltip, first find out where the code that controls the tooltip is, and then read it.
You will find a piece of code like this:
- Tooltip.DEFAULTS = {
- animation: true,
- placement: 'top',
- selector: false,
- template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
- trigger: 'hover focus',
- title: '',
- delay: 0,
- html: false,
- container: false,
- viewport: {
- selector: 'body',
- padding: 0
- }
- }
After a little debugging, I found that this is indeed the configuration of tooltip.
//然后将：
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
//修改为：
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><pre class="tooltip-inner"></pre></div>',That is to replace the content originally wrapped with div tags with pre tags, and test it, it is indeed OK.
bootstrap study notes - prompt box (tooltip)
Solution two:
Since it can take effect by modifying the pre tag, it can also be similar to the effect of the pre tag by setting the css attribute; so I used white-space: pre-wrap; although the line break takes effect, the part of the text that is too long without the line break will not automatically wrap and scroll bars will appear. So I used white-space:pre-line; to solve this problem. This property can not only recognize line breaks, but also automatically wrap lines beyond the width, which is perfect.
(Tab. nowrap Text will not wrap, text will continue on the same line until a tag is encountered. pre-wrap Preserves whitespace sequences, but wraps normally. pre-line Merges whitespace sequences, but preserves newlines. inherit Specifies that the value of the white-space attribute should be inherited from the parent element.)
2. Code
The code is as follows (example):
//放在tooltip容器内的属性及数据
data-html="true" data-placement="right" data-toggle="tooltip" title=" <span>'+val.name+'</span> </br></br> '+val.desc+'">'+val.name + '<span class="more_count">'+val.count+ '</span>.tooltip.right .tooltip-arrow {border-right-color: #fff;}
.tooltip{left: calc(50%-500px) !important;}
.tooltip-inner{text-align: left !important;display: inline-block !important;border: 1px solid #003594;background: #fff;background-color: #fff;color: #333;padding:10px;max-width: 500px !important;white-space:pre-line !important;font-size: 14px;}
.tooltip-inner span{color: #333;font-weight: 900;}
.tooltip .arrow::before {border-color: #FFFFFF;}
.tooltip_title{font-weight: bolder;}Summarize
The above is the problem encountered when using the tooltip in bootstrap.