How to Add a Line Break to a Tooltip

by Updated June 1, 2018

It's possible to add line breaks to a HTML ToolTip tag.  To add the line break simply use either the 
 entity or in some cases the \n escaped newline character will work.

In a regular HTML page the ToolTip title tag would look like the following when creating a line break:

-----------------------------------------------

title="First: We will break the line here 
 Second: then continue on this line."

-----------------------------------------------

 

In ASP.NET, the tooltip line break uses \n and would look like this:

-----------------------------------------------

ToolTip="First: We will break the line here \n Second: then continue on this line."

-----------------------------------------------

 

I have only tested this in Internet Explorer 7, so you will want to test this out in Firefox and Safari as well. To test Hover Over This.

Keep in mind there may be a limit to the number of characters you can have in a Tooltip.
 

 

 


0
6

6 Comments

anonymous by Amy on 7/22/2008
Doesn't work in my Firefox 3. The entire tooltip shows up on one line.
anonymous by Doğan on 1/9/2009
Line Breaks in flex...
In flex ide, you can do this with toolTip="Hello
World". But you must use code editor. If you do this with Flex Properties panel, flex converts & char to &amp naturally for xml compability. Use code editor :)
anonymous by Jordi Camps on 4/22/2009
Well, I didn't manage to get the \n working. The 
 separator did work, as proposed by Dogan (from ASP.NET in my case).

But the above only works in IE... it looks like it's impossible to add line breaks in standard tootips in Firefox. The good thing about the 
 solution is that it is transparent in Firefox (no line break but, at least, no other strange chars!)
anonymous by Enrique on 4/27/2010
Thanks. That really helped.

 worked in Google Chrome
anonymous by buddy on 6/8/2011
\r\n also works on chrome (didnt even test \n alone)
anonymous by Charlie on 6/17/2011
Thanks Buddy

Add your comment

by Anonymous - Already have an account? Login now!
Your Name:

Comment:
Enter the text you see in the image below
What do you see?
Can't read the image? View a new one.
Your comment will appear after being approved.

Related Posts


Step by step on how-to change your Twitter background image to make a customized Twitter theme. Login to your Twitter account On the menu tab at the top, click on the "Settings" link. Now click on the "Design" tab. You'll be able to change the theme using...  more »

In Facebook’s quest to further improve their services to thousands of people all around the world, they have formed a partnership with Skype to provide you with a convenient video chat application. In July 2011, the Skype/Facebook chat became...  more »

In my previous article 'How to Search Google Effectively', I introduced the basic Google search methods and described how we can structure our searches by using special characters and operators. But Google provides a wider range of tools that help us with...  more »

For about a month now, whenever I visited certain sites like Mashable.com using Internet Explorer 8 browser, I was getting redirected to the mobile browser version of the site instead of the regular web version. This was pretty annoying and I wasn't quite...  more »

You may be wondering where the search box went to in Internet Explorer 9. If you were previously using IE8, or Firefox, you're probably accustomed to seeing the search box in the upper right-hand side of the browser window. Well that's all changed in IE9,...  more »

I would like to learn how to get the skills and education to be able to build interactive websites. Can you give me some help and explain how to get started?  more »

Amazon Prime Day 2017 has finally arrived and now we have a first hand look at many of the days featured deals. Most of these Prime Day deals will not be live until 9 pm on July 10th and will run through July 11th, so take advantage of them while they...  more »

This is one of those simple web page design things that can drive a web developer absolutely crazy.  more »

So I recently discovered that the Conduit Search Engine had become the default search engine in my Firefox browser. Fortunately, it's pretty simple to remove Conduit from your Search Engine List in Firefox. Here's how you can quickly remove the Conduit...  more »

A lot of social bookmarking sites are now iFraming in other websites, in order to keep traffic on their site so they get more pageviews. In order to get around the HTML iFraming of your site, below is a little javascript code that will automatically get a...  more »

Whether you accidentally added someone as a friend on Facebook or just want to cancel a friend request you made to someone, you can cancel the request. Here's how to cancel a Facebook friend request: Visit the person's profile you want to cancel your...  more »

If you recently bought a new Dell computer, and then opened up Internet Explorer you may have been automatically redirected to (Dell's) dell.msn.com web page in Internet Explorer, instead of being directed to www.msn.com. This hijacked dell.msn.com URL...  more »