Simple html and css tooltip with newline/carriage return

Question

I stumbled on a simple wonderful tooltip(http://cbracco.me/a-simple-css-tooltip/) but I'm unable to add a new line/ carriage return when I use it. I have tried
&013; \n but no success so far. I have also tried using the html inbuilt tooltip but it looks ugly in firefox.

Tooltip on hover:

Sentence one here. Sentence

two here. Sentence three here.

What I'm trying to output on hover:

Sentence one here.
Sentence two here.
Sentence three here.

<style>
/* Some basic styles */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing:    border-box;
box-sizing:         border-box;
}

a:hover {
text-decoration: none;
}

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius:    3px;
border-radius:         3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

</style> 

<a href="#" data-tooltip ="Sentence one here.
Sentence two here. 
Sentence three here.">Click for more details</a>

gfullam · Accepted Answer · 2020-04-06T13:50:58.357

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&#xa;two here. Sentence three here.">See my CSS tooltip with HTML-entity &amp;#xa; line break:</span>

This was also answered here: CSS data attribute new line character & pseudo-element content value

StackExchange blog: [Introducing Runnable JavaScript, CSS, and HTML Code Snippets](http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) — gfullam, Nov 19 '14 at 16:22

Dave Gordon · Answer 2 · 2014-11-15T00:50:59.653

1

This works Try finishing the line with a full stop (period) and begin the next line with a space. I think you will find that works

UPDATE

There is still some debate about this working. Are the lines being pushed down because they are too long? The answer is NO they are not.

Long line image

As you can see in the above image. The very long line (line 1) is split. However, the smaller lines (line 2 and 3) are still placed on new lines and they are not long enough to be wrapped.

FINAL UPDATE SOLVED

As you can see this now works properly Solved

This is the code to write the tooltip properly

<a href="#" title ="Sentence
                          one here. Sentence two here. 
                          Sentence
                          three 
                          here.">Click for more details</a>

Each new line = a new line in the tooltip. use "title" and not data-tooltip.

edited Nov 15 '14 at 00:50

answered Nov 13 '14 at 18:28

Dave Gordon

1,815
4
30
52

@AndrewTet It does work as you can see from the update. You have stated on numerous occasions that it does not work but have not actually offered any answer. Nevertheless, the above DOES work. – Dave Gordon Nov 13 '14 at 21:43
Can you add a code sample (JSFiddle or Codepen or somthing along those lines) showing it works. Copying the text and solutions you have put up into the code provided by the OP doesn't actually work. It looks like it works, but when I expand the width or try breaking after a single word it all pushes on to one line. As for the reason I have not answered with a solution, it's because I'm pretty sure there isn't one. I would love for someone to find a work around, but since the text in the content is a string I can not see how the browser would differentiate that from a line break. – AndrewTet Nov 13 '14 at 21:52
For example. If I run the code with the text you show in the first image, I see the same as you and it looks fixed, but if I shorten the second and third sentence by removing the word "Sentence" from the beginning of each so that they are "Two here." and "Three here." and I don't change anything else, the code fails to work. The word sentence is too long to sit on the same line and is forcing the new line, but that isn't a solution, just a happy coincidence. – AndrewTet Nov 13 '14 at 22:00
Ok final time.. fixed that problem as well. see update! – Dave Gordon Nov 15 '14 at 00:48
Again, you've failed to provide a link to a working piece of code and rather just posted a screenshot. But, even beyond that, you've completely changed the point of the question. Yes, using the title attr does something similar, but it's not nearly as stylable or as cutstomizable as what is in the original question. The answer to the original question seems to be, "No. If the original poster wants to use that plug-in, there is no way to add line breaks." You have provided an alternative, but this isn't a solution to the question asked. – AndrewTet Nov 15 '14 at 02:35
@AndrewTet copy a paste it into your codepen codepen.io/supah_frank/pen/ByapME. You are right if he is desperate to use that Tooltip system then he can't have line breaks without using jquery or some other system to manipulate the DOM. – Dave Gordon Nov 15 '14 at 03:25
@AndrewTet you can do it with this plugin. It is nearly as easy as you thought. I have corrected and updated my answer. – gfullam Nov 19 '14 at 15:13

score 0 · Answer 3 · answered Jan 24 '17 at 21:08

0

I had trouble with the other solutions, so here's what I opted for on my site:

<a href="" title="Sentence&nbsp;one&nbsp;here. Sentence&nbsp;two&nbsp;here. Sentence&nbsp;three&nbsp;here.">

answered Jan 24 '17 at 21:08

Akira

1

score 0 · Answer 4 · answered May 24 '22 at 21:43

0

I was able to get the multi-line tooltip to work via the title attribute by using the 
 HTML entity:

<a href="" title="Sentence one here.&#xa;Sentence two here.&#xa;Sentence three here.">

answered May 24 '22 at 21:43

Justin Ipson

481
9
6

Simple html and css tooltip with newline/carriage return

4 Answers4

You can