jQueryUI 工具提示 - 没有空格的文本与工具提示容器重叠

Posted

技术标签:

【中文标题】jQueryUI 工具提示 - 没有空格的文本与工具提示容器重叠【英文标题】:jQueryUI Tooltip - Text without spaces overlaps tooltip container 【发布时间】:2017-09-06 14:26:15 【问题描述】:

我的 Web 应用程序中有一个页面,其中有许多控件,当悬停时会显示 jQueryUI 工具提示。这对于包含带空格的标准文本的工具提示非常有用。

但是,当工具提示文本不包含空格(例如文件路径或数据库字段名称)时,文本会与工具提示容器重叠。

如何像标准工具提示一样强制文本换行?

提前致谢。

JSFiddle Demo

代码

$('.jQueryTooltip').tooltip();

<p>
  <span title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">Standard tooltip with spaces</span>
</p>

<p>
  <span title="Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat">Standard tooltip without spaces</span>
</p>

<p>
  <span class="jQueryTooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">jQuery tooltip with spaces</span>
</p>

<p>
  <span class="jQueryTooltip" title="Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat">jQuery tooltip with spaces</span>
</p>

【问题讨论】:

申请span word-wrap: break-word; 【参考方案1】:

你可以使用这种风格:

 .ui-tooltip 
     word-wrap: break-word;
 

【讨论】:

以上是关于jQueryUI 工具提示 - 没有空格的文本与工具提示容器重叠的主要内容,如果未能解决你的问题,请参考以下文章

如何检查 JQuery UI 工具提示?

使用带有 TypeScript 的 Bootstrap 和 jQueryUI - 获取 (TS) 重复属性“工具提示”

jQuery UI 工具提示小部件中的 AJAX 内容

是否可以在 jquery 函数中为 JQuery UI 工具提示设置不同的 UI 主题

通过更改容器的宽度来对齐文本

jQuery UI 工具提示不支持 html 内容