How to Use a Carriage Return in a HTML Tooltip

How can I use a carriage return in a HTML tooltip?

It’s simple: just press Enter!

<a href="#" title='Tool
Tip
On
New
Line'>link with tip</a>

Add line break within tooltips

Just use the entity code for a linebreak in a title attribute.

Break HTML tooltip message using line breaks

You're using the wrong slash - new line should be \n not /n:

tooltipData="Helo,Angular 2" + "" + "This button is used to test hover message" + "\n" + "This message should come at the last"

Simple html and css tooltip with newline/carriage return

You can

EDIT: This corrects my previous answer that said you can't.

Because your CSS uses content: attr() to get the text inside a specified attribute, you can use an HTML entity code such as to insert a newline.

Inserting a newline via an HTML entity code:

Note: You must set display: block and white-space: pre|pre-line|pre-wrap for the newline to display.

[data-tooltip] {    cursor: default;    font: normal 1em sans-serif;}
[data-tooltip]:hover:after {    display: inline-block;    content: attr(data-tooltip);    white-space: pre-wrap;    color: Tomato;    background-color: OldLace;    padding: 1em;}

<span data-tooltip="Sentence one here. Sentence
two here. Sentence three here.">See my CSS tooltip with HTML-entity &#xa; line break:</span>

How can I use a carriage return in a HTML tooltip?

It’s simple: just press Enter!

<a href="#" title='Tool
Tip
On
New
Line'>link with tip</a>

Carriage Return tooltip text in a title tag using JS

Some browsers will allow

Others will not let you format the tool tip unless you use jQuery UI tooltip or similar

Live demo

The demo is using jQuery 1.6.4 and jQuery UI v1.11.0pre just to let you see that jQuery and jQuery UI can have different versions

the dynamic part is found here:

jQuery Tooltip UI - trigger tooltip after x seconds

var titles = {
    "aprmay":"1. April: Result (49)<br/>2. May: Result (47)",
    "junjul":"1. June: Result (50)<br/>2. July: Result (42)"
}
$(function() {
    $(".result").each(function() {
        var title = this.title.replace(/; /g,"<br/>"); 
        $(this).tooltip({ "content": title });
    });

    // dynamic generate on hover 
    // https://stackoverflow.com/a/16523285/295783 

  $(document).tooltip({
    items: '.dynresult',
    show: 100,
    hide: 500,
    position: { my: 'center bottom', at: 'center top' },
    content: function( callback ) {
      var title = titles[this.id];
      callback( title ); 
    }
  });
});

function getTitles(obj) {
    return titles[obj.id];
}

using this HTML

<h3>Static titles</h3>
<a href="#" class="result" title="1. Apr: Result (45); 2. May: Result (45)">April/May</a>
<a href="#" class="result" title="1. June: Result (50); 2. July: Result (42)">June/July</a>
<hr/>
<h3>Dynamic titles</h3>
<a href="#" class="dynresult" title="" id="aprmay">April/May</a>
<a href="#" class="dynresult" title="" id="junjul">June/July</a>

How can I use a carriage return in a HTML tooltip?

It’s simple: just press Enter!

<a href="#" title='Tool
Tip
On
New
Line'>link with tip</a>

How to Use a Carriage Return in a HTML Tooltip

How can I use a carriage return in a HTML tooltip?

Add line break within tooltips

Break HTML tooltip message using line breaks

Simple html and css tooltip with newline/carriage return

You can

How can I use a carriage return in a HTML tooltip?

Carriage Return tooltip text in a title tag using JS

How can I use a carriage return in a HTML tooltip?

Related Topics

Leave a reply