javascriptjqueryjquery-uijquery-ui-tooltip

jQuery tooltip with large content

I use the jQuery Tooltip Widget to show tooltips with very large contents. If the content is larger than the size of the tooltip window only the end of the content is shown.

I'm looking for a way to force the tooltip widget to show the beginning of the content (instead of the end of the content)

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

Example:

.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>

Solution

  • You'll need to use content option as a Function. Since you add "\r" as the Carriage Return, a very uncommon method, you can use this as a delimiter and split the text into an array. You can then slice off the portion you do not want showing up and join it back.

    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 />");
   }
  });
});

    Working Example: https://jsfiddle.net/Twisty/6h1oqn8s/

    Consider that Windows uses CR and NL ("\r\n") as it's End Of Line (EOL) and Linux uses just NL ("\n") for it's EOL.