jQuery tooltip add line break

Question

So, I want to take the content of a div in which I have several <br/>, and then pass it as a title attribute using jQuery tooltip widget. I want the lines to appear one beneath the other inside the tooltip. thx. the code so far is:

CSS

.Lines {
    width: 125px;
    height:20px;
    overflow:auto;
}

JavaScript

$(function () {
    $(document).tooltip();

    $(".Lines").hover(function () {
        IaTxt = $(this).html()

        $(this).prop('title', IaTxt)

    })
});

HTML

<div class="Lines">
    First line.
    <br/>Second line.
    <br/>Third line!
    <br/>Fourth line?
</div>

Solution 1

You can use the 'content' option of the tooltip widget. See also:

http://jqueryui.com/tooltip/#custom-content

Short example:

  $(function() {
    $( document ).tooltip({
      content: function() {
        return 'foo'
      }
    });
  });

Solution 2

There's a pure CSS solution. Use \n for newlines, and add this CSS style:

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

You can also use pre or pre-wrap instead of pre-line, if you want to preserve whitespace. See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Solution 3

just use the entity 
 for a linebreak in a title attribute.

Solution 4

This is my trick to do it with latest jquery / jqueryui (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 />')); 
  }
});

Solution 5

You could type your HTML directly into the Title attribute and then simply call the following:

$(document).tooltip({
  content: function (callback) {
     callback($(this).prop('title'));
  }
});

This way your HTML is rendered instead of escaped and literally written.

View more solutions

Comments

[ChrisGP]

how specifically would I implement that in my code? i set the title attribute via jQuery

[Ravi Gadag]

add the text, where you want the line break. or replace with the <br/> tag

[ChrisGP]

I don't know if you understood my initial question. I want to take the content of the div [see example div] and display it as a title with jQuery tooltip plugin. in that div i already have <br/> and I want the line breaks to appear in the tooltip where the <br/> are.

[Ravi Gadag]

thats only i told. u replace the <br/> with &#10; yourVariable.replace("<br/>","&#10;");

[ChrisGP]

could you give a practical example, that would achieve my goal? thx

[Teun Lassche]

The string 'foo' can in your case be replaced by Iatext

[Ronen Festinger]

Also I had to replace /n with <br/> in my text before setting the title attribute with it. But now I found a better solution, I wrap it with <pre> tag and it keeps line breaks and tabs.

[oyvey]

By far the easiest solution on this page.

[Minh Nguyen]

You have to use this together with this: .ui-tooltip { white-space: pre-line; }

[Naidim]

Great if you have 1 newline. For multiples be sure to use global option. .replace( /\|/g, '<br />' );

[Olena Vikariy]

Easiest solution for me as well. My text already contained \n so I only needed the CSS. Thanks!

[Matteo Conta]

This is THE answer. Period. Please upvote in order to move this answer on the top.

[Matteo Conta]

Please look into this page the JDandChips answer, the use of custom characters is unnecessary. You can use html in the title attribute simply changing the function in : return $( this ).prop( 'title');

[Mike]

The class selector was different for my version of Jquery Tooltip: ` .tooltip-inner { white-space: pre-line; } ` But same principle!

[huykon225]

the tooltip will not hide after hover.

[Wex]

You can also use a regex pattern like : .replace(/\|/g, '<br />').

[Garr Godfrey]

this only replaces the first '|'.