9

I've recently tried using a new plugin for tooltips because I like the functionality. However I have come into an issue, I do not know how to add new lines so my tooltips don't just run across the whole page. I tried some of the solutions I read on here such as escape characters but they don't work.

$(document).ready(function () {  
 $('.tooltip-custom').tooltipster({
  theme: 'tooltipster-noir'
 });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/tooltipster.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/themes/tooltipster-noir.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.js"></script>

<a href="#" class="tooltip-custom" title="This is my very long run on tooltip that just doesnt seem to want to end or split lines. Ok maybe I am overreacting but still. I want to be able to start a new line whenever I please!"><h1>Hello!</h1></a>
Mr.Smithyyy
  • 2,157
  • 12
  • 49
  • 95

2 Answers2

22

contentAsHTML:True, If the content of the tooltip is provided as a string, it is displayed as plain text by default. If this content should actually be interpreted as HTML, set this option to true.

Insert <br> or use <div> in your title.

 $(document).ready(function () {        
$('.tooltip-custom').tooltipster({
      contentAsHTML: true,
});
});
Robert
  • 5,278
  • 43
  • 65
  • 115
Vendhan Parthy
  • 307
  • 2
  • 9
4

Just read carefully manual for tooltipster - http://iamceege.github.io/tooltipster/

All you need it's just use right settings. In your case, add maxWith

$(document).ready(function () {  
 $('.tooltip-custom').tooltipster({
  theme: 'tooltipster-noir',
        maxWidth: 500   
 });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/tooltipster.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/themes/tooltipster-noir.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.js"></script>

<a href="#" class="tooltip-custom" title="This is my very long run on tooltip that just doesnt seem to want to end or split lines. Ok maybe I am overreacting but still. I want to be able to start a new line whenever I please!"><h1>Hello!</h1></a>
Alexander R.
  • 1,756
  • 12
  • 19