向工具提示插件生成的工具提示添加换行符

Question

我最近尝试使用一个新的工具提示插件，因为我喜欢它的功能。但是我遇到了一个问题，我不知道如何添加新行，所以我的工具提示不只是运行横跨整个页面。我尝试了一些我在此处阅读的解决方案，例如转义字符，但它们不起作用。

$(document).ready(function () {  
 $('.tooltip-custom').tooltipster({
  theme: 'tooltipster-noir'
 });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/tooltipster.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/themes/tooltipster-noir.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.js"></script>

<a href="#" class="tooltip-custom" title="This is my very long run on tooltip that just doesnt seem to want to end or split lines. Ok maybe I am overreacting but still. I want to be able to start a new line whenever I please!"><h1>Hello!</h1></a>

Answer 1

请仔细阅读工具提示手册 - http://iamceege.github.io/tooltipster/

您所需要的只是使用正确的设置。在你的情况下，添加 maxWith

$(document).ready(function () {  
 $('.tooltip-custom').tooltipster({
  theme: 'tooltipster-noir',
        maxWidth: 500   
 });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/tooltipster.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/themes/tooltipster-noir.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.js"></script>

<a href="#" class="tooltip-custom" title="This is my very long run on tooltip that just doesnt seem to want to end or split lines. Ok maybe I am overreacting but still. I want to be able to start a new line whenever I please!"><h1>Hello!</h1></a>

Answer 2

contentAsHTML：是的，如果工具提示的内容以字符串形式提供，则默认显示为纯文本。如果此内容实际上应解释为 HTML，请将此选项设置为 true。

Insert <br> or use <div> in your title.

 $(document).ready(function () {        
$('.tooltip-custom').tooltipster({
      contentAsHTML: true,
});
});

向工具提示插件生成的工具提示添加换行符

Add line break to tooltip generated by tooltipster plugin

jquery

tooltipster