Add line break to tooltip generated by tooltipster plugin

Question

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>

Interdenominational

Answer 1

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,
});
});

Mintamintage

This should be the right answer but <code>contentAsHTML</code> is Deprecated. I dont know since which version – Amoebaean

I believe the version to be 4.0.6, though it wasn't available via npm. – Notary

Answer 2

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>

Hostel

Is there a way to add a line break inline though? – Bonds

This does not in any way answer the question. – Paunch

Thats not the question. – Amoebaean