jQuery 包含大量内容的工具提示

Question

我使用 jQuery 工具提示小部件来显示内容非常多的工具提示。如果内容大于工具提示的大小 window，则仅显示内容的末尾。

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

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>

Answer 1

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

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") 因为它已停产。

jQuery 包含大量内容的工具提示

jQuery tooltip with large content

javascript

jquery

jquery-ui

jquery-ui-tooltip