How to make Twitter Bootstrap tooltips have multiple lines?

Adding new lines in tooltips

Using
tags and encoded newlines

Creating multi-line tooltips? Use <br> tags for an easy and fast solution. For dynamic content, opt for encoded newlines such as 
, a quick hack for server rendered content.

Using white-space CSS property

When you rule your tooltips' CSS like a king or queen, use the white-space: pre; or white-space: pre-wrap; properties. The former respects all whitespace and lines while the latter wraps long content automatically preventing text overflow.

/* With great power comes great tooltip responsibility */
.tooltip-inner {
  white-space: pre-wrap;
}


Go beyond with advanced tooltip options

Turning on HTML content in tooltips

Want to bring HTML tags into your tooltips? Use Bootstrap’s data-html="true" attribute and let it parse HTML tags like <br>, <strong>, and many others.

Angular UI Bootstrap integration

Running Angular like a champ and got Angular UI Bootstrap under the hood? Use uib-tooltip-html attribute for tooltips. Remember to use $sce.trustAsHtml() to bypass sanitization issues and welcome safe HTML content.

/* The sanitization forcefield to trust the HTML */
$scope.safeContent = $sce.trustAsHtml('Line 1<br>Line 2');


Old acquaintance tooltip-html-unsafe is in the past; use tooltip-html for future tooltips.

<button uib-tooltip-html="safeContent">Hover over me!</button>


Special tooltip considerations

Handling tooltip content wrapping

If tooltips contain a whole War and Peace, make sure the max-width property is set or white-space: pre-wrap; is in place. This will prevent the loss of text behind tooltip boundaries.

Don't mix HTML in title attributes

Even though placing HTML directly in title attributes seems like a quick win, it can cause cross-browser inconsistencies. Be a pro and use dedicated data attributes like data-original-title in Bootstrap.

Keep your frameworks up-to-date

In the modern JavaScript landscape, latest version is the synonym of good health. Regularly check your project's dependencies, updating them equals access to the latest capabilities and robust tooltips.

Toolkit extension

Non-links and rel="tooltip"

Improvising with elements that are not links? Use rel="tooltip" for an added zing without messing with the standard title attribute.

Diverse tooltip scenarios

Vuex or Redux, Tooltip use cases vary. Craft compact or complex content with multi-line strategy maintaining readability.

Hands-on with jsFiddle examples

Mesmerized with interactive learning? Get a hands-on coding experience with jsFiddle examples linked below, showcasing both simple and complex tooltip scenarios.