jquery - 为 tooltipster 插件生成的工具提示添加换行符

标签 jquery tooltipster

我最近尝试使用一个新的工具提示插件,因为我喜欢这个功能。然而我遇到了一个问题,我不知道如何添加新行,这样我的工具提示就不会覆盖整个页面。我尝试了一些我在这里读到的解决方案,例如转义字符,但它们不起作用。

$(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>

最佳答案

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

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

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

关于jquery - 为 tooltipster 插件生成的工具提示添加换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29325611/

相关文章:

jquery - 控制单选组的工具提示工具提示位置

javascript - JQuery 工具提示自定义悬停元素以显示在图像 map 上方

javascript - 切换 php 生成的 div 元素

jQueryUI 选项卡将鼠标悬停在禁用的链接上,如何更改光标使其看起来不可点击?

javascript - D3 V4 折线图如何根据放大移动点?

javascript - 如何查找特定类别类型的检查行数?

javascript - 插件工具提示 - Trunkate Title

php - 将 jQuery 加载到 <body> 中

javascript - Tooltipster 悬停选择和选项在 IE 中不起作用