How to have break Line in title value

Question

I have created this piece of HTML code it has a css style tool tip and a link to that tool tip, whenever you hover over on it will show a piece of text.
But now I want to display two or more lines of text in my tool tip . How can I achieve that?

I tried using \n and <br> but has no effect.

<!DOCTYPE html>
<html>
    
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
            }
        </style>
        <title>CSS3 tooltip</title>
        <style type="text/css">
            .ordertooltip {
                display: inline;
                position: relative;
            }
            .ordertooltip:hover:after {
                background: #333;
                background: rgba(0, 0, 0, .8);
                border-radius: 5px;
                bottom: 26px;
                color: #fff;
                content: attr(title);
                left: 20%;
                padding: 5px 15px;
                position: absolute;
                z-index: 98;
                width: 220px;
            }
            .ordertooltip:hover:before {
                border: solid;
                border-color: #333 transparent;
                border-width: 6px 6px 0 6px;
                bottom: 20px;
                content:"";
                left: 50%;
                position: absolute;
                z-index: 99;
            }
        </style>
    </head>
    
    <body>
        </br>
        </br>
        </br>
        </br> <a title="1-Line One\n2-Line two<br>3-Line Three" class="ordertooltip"><span title="More">My Tip</span></a>

    </body>

</html>

UPDATE

Ok using  works in a way that i don't apply my css but when i apply it it's not working again.

UPDATE 2

thanks for your replies but i should say i can't use any external libraries.
and i need to support at least Firefox, therefore hitting enter wont work for me.

UPDATE 3

I found a workaround for my own problem and answer it here but it certainly is not and acceptable answer because it's just a workaround. hope someone bring a nice solution for the original question.

look at this, may be you shoud use php file http://stackoverflow.com/questions/358874/how-can-i-use-a-carriage-return-in-a-html-tooltip — goupil, Nov 25 '15 at 06:00
use code for line break. check this - http://stackoverflow.com/questions/3340802/add-line-break-within-tooltips — Sagar Pawar, Nov 25 '15 at 06:04
There's a error in your markup. You are closing `` and `` but not opening it anywhere. — abhishekkannojia, Nov 25 '15 at 06:08
@abhishekkannojia ok i fixed it but i need an answer to my main question — dev-masih, Nov 25 '15 at 06:12
@ketan the content of tooltip may change in start of any page but not in run-time. — dev-masih, Nov 25 '15 at 06:15

score 2 · Answer 1 · answered Nov 25 '15 at 06:17

If there is tooltip text not change runtime then you can give fixed width to .ordertooltip:Hover:after

And use  for line break;

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>


<title>CSS3 tooltip</title>
 
<style type="text/css">
 
.ordertooltip{
  display: inline;
  position: relative;
 }
  
 .ordertooltip:Hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 100px;
}
  
.ordertooltip:Hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}
 
  </style>


</head>


<body>

</br></br></br></br>
<a title="1-Line One&#013;2-Line two&#013;3-Line Three" class="ordertooltip"><span title="More">My Tip</span></a>


</body>
</html>

Hope it helps to move forward.

thanks for your answer, although it seems working but i feel i should tell you that i have just one html page and when i 'm loading that page i change the content of the tool tip so the tooltip can have long text or short one, so in your solution sort texts are still have orginal problem and long texts have little room and force to break in half. — dev-masih, Nov 25 '15 at 06:26

score 1 · Answer 2 · edited Mar 17 '21 at 11:45

1

I solved this by adding the data attribute.

data-html="true"

And adding a <br> in the title as: title="Requirement: <br> 0.7".

edited Mar 17 '21 at 11:45

Leo

849
7
20

answered Mar 16 '21 at 14:52

GVN

11
1

score 0 · Answer 3 · edited May 23 '17 at 12:30

0

You have a few options:

Use a tooltip plugin (http://iamceege.github.io/tooltipster/ is not bad)
Just press the "enter" key (not supported in all browsers)

For option 2, this is how the code looks:

<a title="First line
Second line
Third line">My link</a>

I didn't test browser compatibility though.

For more information, check out this stackoverflow post.

Option 2 demo:

a { background-color: #c3c3c3; display: block; width: 100px; height: 100px; }

<a title="This is a title
Second line
Third line">Contents</div>

Then just add your own custom CSS.

But personally, if I were you, I would just use a tooltip library. It's much simpler and there are many choices. Don't re-invent the wheel! :)

edited May 23 '17 at 12:30

Community

1
1

answered Nov 25 '15 at 06:00

Nathan

1,321
1
18
32

thanks for your answer but i cant use any external library and i need to support at least Firefox, just hitting enter doesn't work in fire fix. – dev-masih Nov 25 '15 at 06:13
@MasihAkbari No external library? :( In that case, you would basically have to recreate a simpler version of the library. Basically, using javascript/jquery, when the user hovers over the `` tag get the position of the cursor using the `event` variable and dynamically create an html element at that position. Complicated and messy, though. – Nathan Nov 25 '15 at 06:16
the problem is i cant use any javascript/jquery – dev-masih Nov 25 '15 at 06:18
@MasihAkbari OH. I see now. Unfortunately, this makes it very difficult... I noticed on the other answer that the line breaks when it runs out of space. As a very horrible hack, I wonder if you could enter a lot of random whitespace to force it to create a new line. Edit: Nope. :( – Nathan Nov 25 '15 at 06:19

score 0 · Answer 4 · answered Nov 25 '15 at 09:44

I'M NOT ACCEPTING MY OWN ANSWER BECAUSE IT'S JUST A WORKAROUND NOT AN ANSWER

I've changed my css and use span in my html so now i can put a line break with <br> tag.

<!DOCTYPE html>
<html>
    
    <head>
        <style type="text/css">
            .txt {
    display: inline-block;
    position: relative;
   }
   .ordertooltip {
    display: none;
    width: 200px;
    position: absolute;
    padding: 8px;
    margin: 4px 0 0 4px;
    top: 20;
    left: 16px;
    border: 1px solid #76B6D7;
    border-radius: 0px 8px 8px 8px;
    background: #bedffe;
    font-size: 15px;
    box-shadow: 0 1px 2px -1px #21759B;
    z-index: 999;
    background-position: 0 0;
    border-color: #76B6D7;
    background-color: #bedffe;
    box-shadow-color: #21759B;
   }
   .txt:hover .ordertooltip {
    display: block;
   }
        </style>
    </head>
    
    <body>
        </br>
        </br>
        </br>
        </br> 
  <span class="txt">My Tip</a>
    <span class="ordertooltip">1-Line One<br>2-Line two<br>3-Line Three</span>
  </span>

    </body>

</html>

How to have break Line in title value

4 Answers4