Skip to content

How to Add jQuery UI Tooltip Line Breaks

jquery tooltip line break

I guess you have tried all the possible combinations to add line breaks in jQuery tooltips but failed. Here is my approach to resolve the problem in version 1.10.3 of jQuery UI.

In HTML part, to add "\n" to represent the line breaks like this:

<a href='#' title='The first line.\nThe second line.\nThe third line.'>The links</a>

In CSS part, you must suppress the original attribute white-space of class ui-tooltip in your local CSS file like this:

.ui-tooltip {
  white-space: pre-line;

I hope it helpful.

4 thoughts on “How to Add jQuery UI Tooltip Line Breaks”

    1. My bad, it should be \n (backslash n) between lines. I have corrected it in the post.

      Another finding to myself, WordPress will trim all special characters in content before importing posts.

Leave a Reply

Your email address will not be published.