How to break line in jQueryUI tooltip

Question

The new version of jQueryUI (1.9) comes with the native tooltip widget. After testing with it, it works fine if the content (value of the title attribute) is short. But if the c

Answer 1

The placement of the tooltip is controlled by a jQueryUI Position object and the default settings are:

{ my: "left+15 center", at: "right center", collision: "flipfit" }

The Position Object, in particular the collision attribute can be changed to force placement of the control somewhere else. The default for tooltips is flipfit which means the if the default (on the right) does not fit it will flip to the left and try that position and if that doesn't collide with anything, try to fit the control by moving it away from the edge of the window. The result is that it now collides with the . There doesn't seem to be an option to force a long tooltip to cleverly wrap.

However there are two ways to wrap the content:

Add a custom CSS class to the configuration with a max-width to force wrapping, for example:

JavaScript

$('input').tooltip({
    tooltipClass:'tooltip'
});

CSS

.tooltip {
    max-width:256px;
}

Or insert hard line-breaks
in the title attribute, for example

title="Lorem ipsum dolor sit amet,
consectetur adipisicing elit"

Edit: So it looks like jQueryUI changed the tooltip content option between v1.9 and v1.10 (according to the changelog). For reference here is the difference:

v1.9.2

content: function() {
    return $( this ).attr( "title" );
}

v1.10

content: function() {
    // support: IE<9, Opera in jQuery <1.7
    // .text() can't accept undefined, so coerce to a string
    var title = $( this ).attr( "title" ) || "";
    // Escape title, since we're going from an attribute to raw HTML
    return $( "" ).text( title ).html();
}

So you can put back the older functionality that does not escape
tags in the title attribute by using the .tooltip() like this:

$('input').tooltip({
    content: function() {
        return $(this).attr('title');
    }
});

Also, see jsFiddle demo.