时间戳

首页 > 解决方案 > 带有大量内容的 jQuery 工具提示

javascript - 带有大量内容的 jQuery 工具提示

问题描述

我使用 jQuery Tooltip Widget 来显示内容非常大的工具提示。如果内容大于工具提示窗口的大小，则仅显示内容的末尾。

我正在寻找一种方法来强制工具提示小部件显示内容的开头（而不是内容的结尾）

https://api.jqueryui.com/tooltip/

例子：

.mytooltip {
	width: 300px;
	border-top: solid 1px #BBBBBB;
	border-bottom: solid 1px #444444;
	padding: 5px 20px;
	border-radius: 0;
	box-shadow: 0 0 4px grey;
	margin: 2px;
	font-stretch: condensed;
  white-space: pre-line;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( document ).tooltip({
			tooltipClass: "mytooltip",
       });
  } );
  </script>
</head>
<body>
 
<p>This is a long website</p>
<p>This is a long website</p>
<p>This is a long website</p>
<p>This is a long website</p>
       
<p><a href="#" title="Line 1 of long text. &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Long text &#013; Last line of long text">Tooltip</a> </p>

</body>
</html>

标签： javascriptjqueryjquery-uijquery-ui-tooltip

解决方案

您需要将content选项用作函数。由于您添加"\r"回车，这是一种非常不常见的方法，您可以将其用作分隔符并将文本拆分为数组。然后，您可以切掉不想显示的部分并将其重新加入。

JavaScript

$(function() {
  var toolTipMax = 10;

  function chunk(s){
    var dl = "\r";
    if(s.indexOf("\r\n") > 1){
      dl = "\r\n";
    } else if(s.indexOf("\r") < 0 && s.indexOf("\n") > 1){
      dl = "\n";
    }
    return s.split(dl);
  }

  $("body").tooltip({
     tooltipClass: "mytooltip",
   content: function(){
     var c = $(this).attr("title");
     var sArr = chunk(c);
     var part = sArr.slice(0,toolTipMax);
     return part.join("<br />");
   }
  });
});

工作示例：https ://jsfiddle.net/Twisty/6h1oqn8s/

考虑 Windows 使用CR和NL( "\r\n") 作为行尾 (EOL)，而 Linux 仅使用NL( "\n") 作为 EOL。

推荐阅读