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

This works:

HTML

<div class="produtos">
    <div class="produtos_imagem">
        <img src="imagens/teste/7.jpg" width="200" title="Código: 00122124<br /><br />Descrição: AB PNEU 700 X 23 FOLD CORPRO<br /><br />Unidade: PN<br /><br />Marca : PNEU"/>
    </div>
    <p class="produtos_titulo">AB PNEU 700 X 23 FOLD CORPRO</p>
</div>

JavaScript

$(document).tooltip({
    content: function() {
        var element = $( this );
        if ( element.is( "[title]" ) ) {
            return element.attr( "title" );
        }
    },
    position: {
        my: "center bottom-20",
        at: "center top"
    }
});

Answer 2

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 <input>. 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 <br/> in the title attribute, for example

title="Lorem ipsum dolor sit amet,<br/>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 $( "<a>" ).text( title ).html();
}

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

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

Also, see jsFiddle demo.

Answer 3

I have a solution for jQuery 2.1.1, similar to @Taru's solution.

Basically, we have to use tooltip's content call to dynamically get the data from the element. The element itself can have any html markup in it. Note that you need to import

So, onload, I do this:

$(function() {
    $( document ).tooltip({
      content:function(){
        return this.getAttribute("title");
      }
    });
  });

And my example element is this:

<div title="first<br/>second<br/>">hover me</div>

Answer 4

This is my trick to do it with latest jquery / jqueryui

It's assuming all of the items you want to have tooltips have class 'jqtooltip', they have title tags, and the title has a pipe character for a line separator.

$('.jqtooltip').tooltip({ 
  content: function(callback) { 
     callback($(this).prop('title').replace('|', '<br />')); 
  }
});