jQuery tooltip with large content

Question

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>

Please provide a Minimal, Reproducible Example: stackoverflow.com/help/minimal-reproducible-example — Twisty
– Twisty, Commented Jan 15, 2020 at 18:22

Twisty · Accepted Answer · 2020-01-16 23:59:54Z

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.

Collectives™ on Stack Overflow

jQuery tooltip with large content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related