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

时间:2017-04-11 09:25:58

标签: c# jquery asp.net jquery-ui jquery-ui-tooltip

我的网页应用程序中有一个页面,其中有许多控件在悬停时显示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>

1 个答案:

答案 0 :(得分:1)

您可以使用此风格:

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