Reputation: 9083

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

I'm currently adding verbose tooltips to our site, and I'd like (without having to resort to a whizz-bang jQuery plugin, I know there are many!) to use carriage returns to format the tooltip.

To add the tip I'm using the title attribute. I've looked around the usual sites and using the basic template of:

<a title='Tool?Tip?On?New?Line'>link with tip</a>

I've tried replacing the ? with:

<br />
&013; / 
\r\n
Environment.NewLine (I'm using C#)

None of the above works. Is it possible?

Upvotes: 397

Answers (30)

Danil S

Reputation: 87

Just sharing small bug I saw:

In Chrome 103 with this html:

<!DOCTYPE html>
<html>
<body>
  <select title="Line 1 :&#13;&#13;Line 2">
    <option value="0">test</option>
  </select>
</body>
</html>

I see this:

tittle chrome

On screenshot - two weird characters after "Line 1 :" text, first line.

Fix to this: (I have no idea which is correct/valid but all of them works as fix (in Chrome 103))

Adding space(character) after Line 1 : before first  fix it
Changing first  to 
 full line title="Line 1 :
Line 2"
Adding   after Line 1 : before first 
Also changing  to "Carriage Return symbol" will fix it

Upvotes: 1

Zahid Rouf

Reputation: 1751

Using \x0A worked for me to get newline in title/tooltip on mouse hover.

FILENAME: news.php

<span onmouseover="getInfo(this,'06-APR-22')" data-html="true">Day</span>

FILENAME: news.php

<script>
function getInfo(x, dateVal) {       
      var html = $.ajax({
            type: "POST",
            url: "report/get-info.php",
            data: {             
                'dateVal': dateVal,
            },              
            success: function(response) {
                x.setAttribute('title', response );
            }
        });
}
</script>

FILENAME: get-info.php

<?php
$tmp  = $_POST['dateVal'];   
$dateVal = date("m/d/Y", strtotime($tmp));

$querySelectCode = "SELECT INFO_ID, INFO_NAME FROM INFORMATION
                    WHERE TRUNC(DP.DATE_TIME) = TO_DATE('$dateVal','MM/DD/YYYY') ";    
$stmtSelectcode = oci_parse($dbConn, $querySelectCode);
if ( ! oci_execute($stmtSelectcode) ){
    $err = oci_error($stmtSelectcode);
    trigger_error('Query failed: ' . $err['message'], E_USER_ERROR);
}
$INFO_ID = array();
while(oci_fetch($stmtSelectcode)){
    $INFO_ID[]   =  oci_result($stmtSelectcode, 'INFO_ID');
    $INFO_NAME[]     =  oci_result($stmtSelectcode, 'INFO_NAME');        
}
for($index=0 ; $index < count($INFO_ID) ; $index++)
{
    echo   $INFO_NAME[$index ] . "\x0A" ;        
}
?>

Upvotes: 1

Luís Alves

Reputation: 81

The "just press enter" solution didn't work here, so the good old vanilla JavaScript seems a pretty efficient and clean way.

function customTitle(event, textHeader, text){
    let eventOrigin = event.target || event.srcElement;
    eventOrigin.title = textHeader + '\n\n' + text;
}

And on element onmouseover:

onmouseover="customTitle(event, 'Some Caput', 'Some more or less complete description');"

Voilà! It works on Google Chrome and Firefox (which does not exclude others; I just didn't check it).

Upvotes: 0

Welshboy

Reputation: 318

Just use JavaScript. Then it is compatible with most and older browsers.

Use the escape sequence \n for newline.

document.getElementById("ElementID").title = 'First Line text \n Second line text'

Upvotes: 5

john2002

Reputation: 39

There are multiple ways to do this. &#13 or 
 depending on the browser. But the following example works for me on my Google Chrome and Firefox.

<a href="javascript:;" title="Tooltip Line One &#10;Tooltip Line Two &#10;Tooltip Line Three">Tooltip</a>

Upvotes: 2

Siddhesh T

Reputation: 446

If you are trying to do this in a React project where you are rendering in the below format:

title={`First line of text ${varOne} &#13; Second line of text ${varTwo} &#13; Third line of text ${varThree}`}

Then , 
 and similar solutions don't work. They will actually render as text.

Instead actually creating the text as required is a better option. An example for better understanding:

title={`First line of text ${varOne}
Second line of text ${varTwo}
Third line of text ${varThree}`}

Make sure to remove tabs/space indentations before "Second line of text" and "Third line of text". Otherwise they will render as well.

It was tested on Google Chrome 96 and Firefox 95.0b12 (Developer Edition, because, well why not). It should work on most modern browsers as well.

Upvotes: 0

Anil Bharadia

Reputation: 2820

If you are using jQuery:

$(td).attr("title", "One \n Two \n Three");

will work.

It was tested in Internet Explorer 9: working.

Upvotes: 17

Mostafa Arian Nejad

Reputation: 1665

I was directed to this page while searching for a solution to display breakline in Bootstrap tooltips. Bootstrap tooltips are displayed when data-toggle="tooltip" is added to a HTML tag.

Finally, I found out that a data-html="true" should be added to the tag, and doing so the HTML inside your title will be rendered. Then use <br> to breakline. Checkout the samples below:

Before (not showing any breakline):

<i class="bi bi-x-circle" data-toggle="tooltip" data-placement="top" title="test1 <br> test2"></i>

After (showing breakline):

<i class="bi bi-x-circle" data-toggle="tooltip" data-html="true" data-placement="top" title="test1 <br> test2"></i>

- Tip for Laravel and Blade programmers: You can convert \n to <br> with nl2br("string") function.

- The solutions above have been tested in Google Chrome 98.

Upvotes: 1

user3416126

Reputation: 158

I am on Firefox 68.7.0 ESR and the  doesn't work. Breaking the lines via <CR> did work, so I am going with that since it simple and forward.

I.e.,

<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk

Upvotes: 0

Niket Joshi

Reputation: 738

I have tried with 
 to display the title text on a new line and it’s working like a charm.

Upvotes: 0

Nithin C

Reputation: 215

Use data-html="true" and apply <br>.

Upvotes: -2

Chris

Reputation: 6392

Much nicer looking tooltips can be created manually and can include HTML formatting.

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more&#13;&#10;and then some">over</a> the text below:</p>

<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>

<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>

</body>
</html>

This is taken from the W3Schools post on this. Experiment with the above code here.

Upvotes: 3

csandreas1

Reputation: 2388

This  should work if you just use a simple title attribute.

On Bootstrap popovers, just use data-html="true" and use HTML in the data-content attribute.

<div title="Hello &#013;World">hover here</div>

Upvotes: 7

Shelby115

Reputation: 2865

Razor syntax

In the case of ASP.NET MVC, you can just store the title as a variable, as \r\n, and it'll work.

@{
    var logTooltip = "Sunday\r\nMonday\r\netc.";
}

<h3 title="@logTooltip">Logs</h3>

Upvotes: 2

Fstarocka Burns

Reputation: 163

It is a hack, but it works - (tested on Google Chrome and mobile)

Just add non-breaking space,  , till it breaks - you might have to limit the tooltip size depending on the amount of content but for small text messages this works:

&nbsp;&nbsp; etc

I tried everything above and this is the only thing that worked for me.

Upvotes: 0

Mr.X

Reputation: 31345

We had a requirement where we needed to test all of these, and here is what I wish to share:

document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")

<p title='Tool
Tip
On
New
Line'>Tooltip with <pre>
  new
  line</pre> Works in all browsers</p>
<hr/>

<p title="Tool&#13;Tip&#13;On&#13;New&#13;Line">Tooltip with <code>&amp;#13;</code> Not works Firefox browsers</p>
<hr/>

<p title='Tool&#10;Tip&#10;On&#10;New&#10;Line'>Tooltip with <code>&amp;#10;</code> Works in some browsers</p>
<hr/>

<p title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>Tooltip with <code>&amp;#xD;</code> May work in some browsers</p>
<hr/>

<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>
<hr/>


<p title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Tooltip with <code>• </code>Unordered list tooltip</p>
<hr/>


<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>
<hr/>

<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>
<hr/>

<p title='Tool&#013;Tip&#013;On&#013;New&#013;Line'>Tooltip with <code>&amp;#013;</code> Works in most browsers</p>
<hr/>

Fiddle

Upvotes: 8

Youans

Reputation: 5091

As for whom 
 didn't work for, you have to style the element on which lines are visible in as: white-space: pre-line;

It is referenced from GuitarWorker's answer to Add line break within tooltips.

Upvotes: 6

Ricardo Zea

Reputation: 10282

Here's a demo: http://jsfiddle.net/rzea/vsp6840b/3/

HTML used:

<a href="#" title="First Line&#013;Second Line">Multiline Tooltip</a>
<br>
<br>
<a href="#" title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Unordered list tooltip</a>

Upvotes: 8

user3087089

Reputation:

Just use this:

<a title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>link with tip</a>

You can add new line on title by using this &#x0a.

Upvotes: 6

cprcrack

Reputation: 19199

Also worth mentioning, if you are setting the title attribute with JavaScript like this:

divElement.setAttribute("title", "Line one
Line two");

It won't work. You have to replace that ASCII decimal 10 with a ASCII hexadecimal A in the way it's escaped with JavaScript. Like this:

divElement.setAttribute("title", "Line one\x0ALine two");

Upvotes: 65

Rehan

Reputation: 1339

On Chrome 16, and possibly earlier versions, you can use "\n". As a side note, "\t" also works.

Upvotes: 6

Salman Arshad

Reputation: 272426

According to this article on the W3C website:

CDATA is a sequence of characters from the document character set and may include character entities. User agents should interpret attribute values as follows:

Replace character entities with characters,

Ignore line feeds,

Replace each carriage return or tab with a single space.

This means that (at least) CR and LF won't work inside the title attribute. I suggest that you use a tooltip plugin. Most of these plugins allow arbitrary HTML to be displayed as an element's tooltip.

Upvotes: 3

Juan

Reputation: 89

 <----- This is the text needed to insert a carriage return.

Upvotes: 8

Kornel

Reputation: 100220

The latest specification allows line feed characters, so a simple line break inside the attribute or entity 
 (note that characters # and ; are required) are OK.

Upvotes: 365

Greg

Reputation: 321864

It’s simple: just press Enter!

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

Upvotes: 328

roborourke

Reputation: 12217

I don't believe it is. Firefox 2 trims long link titles anyway and they should really only be used to convey a small amount of help text. If you need more explanation text I would suggest that it belongs in a paragraph associated with the link. You could then add the tooltip JavaScript code to hide those paragraphs and show them as tooltips on hover. That's your best bet for getting it to work cross-browser IMO.

Upvotes: 6

Stefan Mai

Reputation: 23959

Try character 10. Until January 2015 it wouldn't work in Firefox.

The text is displayed (if at all) in a browser dependent manner. Small tooltips work on most browsers. Long tooltips and line breaking work in IE and Safari (use 
 or  for a new newline). Firefox and Opera do not support newlines. Firefox does not support long tooltips.

http://modp.com/wiki/htmltitletooltips

Firefox now supports using  to insert a line break in an HTML title attribute. See the snippet example below.

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

Upvotes: 95

David Vielhuber

Reputation: 3569

On Chrome 79,  does not work anymore.

I was successful with:




This works in all major browsers.

Upvotes: 18

Greg Dean

Reputation: 30107

 will work on all majors browsers (IE included)

Upvotes: 10

Juan Cortés

Reputation: 21132

As a contribution to the  solution, we can also use &#009 for tabs if you ever need to do something like this.

<button title="My to-do list:&#013;&#009;-Item 2&#013;&#009;-Item 3&#013;&#009;-Item 4&#013;&#009;&#009;-Subitem 1">TEST</button>

Demo

Upvotes: 18

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

Answers (30)

Razor syntax

Demo

Related Questions