jQuery всплывающая подсказка с большим содержанием - PullRequest
0 голосов
/ 15 января 2020

Я использую jQuery Виджет подсказок, чтобы показать подсказки с очень большим содержанием. Если содержимое больше, чем размер окна всплывающей подсказки, отображается только конец содержимого.

Я ищу способ заставить виджет всплывающей подсказки показывать начало содержимого (вместо конца содержимого)

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>

1 Ответ

1 голос
/ 17 января 2020

Вам нужно будет использовать опцию 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...