Bootstrap Tooltip displays line wrapping and left alignment implementation methods

I encountered some minor problems when using Bootstrap's Tooltip function. Line breaks were lost and the text was not left aligned. This article mainly introduces to you the solution for Bootstrap Tooltip to display line breaks and left alignment. Friends who are interested should take a look at it. I hope it can help you.

Today I encountered two minor problems when using Bootstrap’s Tooltip function: line breaks were lost and the text was not left aligned. Then I found the solution through Baidu and Bing.

First take a look at the code for displaying Tooltip in Bootstrap:

<link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
<script src="res/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script>
 $(function () {
  $('[data-toggle="tooltip"]').tooltip();
 });
</script>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="${desc}">${title}</button>

Note that ${desc} and ${title} here are data passed from the SpringMVC background.

This is the most basic code of Bootstrap Tooltip, which will cause the two problems I mentioned.

Line break problem

When encountering a line break, the first thing we think of is to replace "\n" with "
". I do the same, but unfortunately it is in the Tooltip does not work. Tooltip directly displays "
" as text.

In other words, HTML does not work in Tooltip. Fortunately, I found the data-html attribute, which allows me to use HTML in the Tooltip and make "
" work. After adding data-html="true", line wrapping works. See the following code:

<button type="button" class="btn btn-default" data-html="true" data-toggle="tooltip" data-placement="left" title="${fn:replace(desc, newline, "<br/>")}">${title}</button>

Left alignment

After it works based on HTML, it will be much simpler to do left alignment. The displayed content is placed in

...

.

<button type="button" class="btn btn-default" data-html="true" data-toggle="tooltip" data-placement="left" title="<p align=&#39;left&#39;>${fn:replace(desc, newline, "<br/>")}</p>">${title}</button>

Whatever the reason, if

doesn't work, there are still many options:

<style> 
 .tooltip > p {
  text-align:left;
 }
</style>
.tooltip-inner {
  text-align:left;
}

Related recommendations:

Detailed explanation of the Tooltip instance of the Vue component

Detailed explanation of the graphic code for implementing the Tooltip floating prompt box special effect using native JavaScript

jQuery implements ToolTip element positioning Show function example

The above is the detailed content of Bootstrap Tooltip displays line wrapping and left alignment implementation methods. For more information, please follow other related articles on the PHP Chinese website!