Using
in tool tip and change the default color of a tool tip

Question

I am using default asp.net ToolTip property, the text is

This is Going to be a long text
Thats why we decided to split it.

but using <br/> to split the line doesn't work, it renders as a text, and I want it to break the line instead.

Here is my code:

Label lblActionText = new Label();
lblActionText.Text = "Helloooo Phaltu";
lblActionText.Style.Add("cursor", "pointer");
lblActionText.ToolTip =
    "This is Going to be a long text"
    + "<br/>"
    + "Thats why we decided to split it.";

score 4 · Answer 1 · answered Jun 01 '11 at 13:18

4

I've not tried this but would "System.Environment.NewLine" not do the job instead of the BR tag?

answered Jun 01 '11 at 13:18

Apqu

4,880
8
42
68

1

lblActionText.ToolTip = String.Concat("This is Going to be a long text", Environment.NewLine, "Thats why we decided to split it."); – Dennis Bischof Jun 01 '11 at 13:21
lblActionText.ToolTip = "This is Going to be a long text" + Environment.NewLine + "Thats why we decided to split it."; works in IE8 and Chrome for me. Is there anything else on your page that could interfere? – Apqu Jun 01 '11 at 13:27
Sorry, I don't use Firefox so can't comment specifically on it but there is an interesting read here: https://bugzilla.mozilla.org/show_bug.cgi?id=358452 maybe Firefox just doesn't support newlines in tooltips? – Apqu Jun 01 '11 at 13:38

score 2 · Answer 2 · edited Oct 11 '12 at 03:36

2

You can use this to insert a line break inside a ToolTip.

lblActionText.ToolTip = " First text " + Environment.NewLine + " second text ";

edited Oct 11 '12 at 03:36

ForceMagic

6,230
12
66
88

answered Jul 19 '12 at 11:58

Muthuvijayan

21
1

score 1 · Answer 3 · edited Feb 16 '16 at 17:39

1

You are passing a string value to a Tooltip, and that's why the HTML element <br /> is not working.

However you can try this ASP.Net AJAX TooltipExtender

edited Feb 16 '16 at 17:39

Off The Gold

1,228
15
28

answered Jun 01 '11 at 13:23

Muhammad Akhtar

51,913
37
138
191

NakedBrunch · Answer 4 · 2011-06-01T13:44:07.820

1

Use the line break character entity (). It is easy to implement but the only problem is that this will work in IE & Chrome but not Firefox.

lblActionText.ToolTip = "This is Going to be a long text&#013;Thats why we decided to split it.";

See jsFiddle: http://jsfiddle.net/jafLf/

edited Jun 01 '11 at 13:44

answered Jun 01 '11 at 13:24

NakedBrunch

48,713
13
73
98

Did you test it in Fire Fox ? – Muhammad Akhtar Jun 01 '11 at 13:34
@BrunoLM; you can try my answer. – Muhammad Akhtar Jun 01 '11 at 13:39
@Muhammad what is your answer?? – BreakHead Jun 01 '11 at 14:31
did you see the answers list against your question :) – Muhammad Akhtar Jun 01 '11 at 14:31
This works in Firefox now (not sure which version it started working in). I use without the zero. – MikeTeeVee Feb 08 '13 at 14:32

score 0 · Answer 5 · answered Jun 01 '11 at 13:21

0

This works only on IE but other browsers are not!! If you want to have a customize tooltip then seach for jQuery tooltips to have a formatted tooltip

answered Jun 01 '11 at 13:21

Ahmed Magdy

5,956
8
43
75

score 0 · Answer 6 · answered Jun 01 '11 at 13:22

0

You can do this with adding a table in the tooltip :)

Example: ASP forum

answered Jun 01 '11 at 13:22

Eystein Bye

5,016
2
20
18

score 0 · Answer 7 · answered Jun 01 '11 at 13:41

The ASP.NET ToolTip property corresponds to the HTML title attribute.

In IE and Chrome you can simply do:

<span title="multiline
tool
tip">Mouseover me!</span>

However, that won't work in Firefox as it actually follows the W3C guidelines for CDATA.

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.

Your best bet (considering you also want to change the colour) would be to go with a jQuery solution such as QTip which gives you all the customisation you want and more..

score 0 · Answer 8 · answered Jun 01 '11 at 14:30

You cannot change the color of a tooltip with the default title attribute. For that the only way is to use a javascript generated tooltip.

There are plenty of plugins for jQuery such as:

Dynamic tooltip

Dynamic

Popup Bubble

popup bubble

jQuery Horizontal Tooltips
Coda Popup Bubble
Awesomeness
TipTip
(mb)Tooltip
vTip
jGrowl
jQuery Ajax Tooltip
Digg-style post sharing tool with jQuery
Input Floating Hint Box
Simpletip
qTip
Orbital Tooltip

And many more, check them here: Stylish jQuery Tooltip Plugins Webdesign

You can also just create your own using javascript. Add a mouseover event on the element then show a hidden div over the element with whichever html elements you want, in whichever color you need.

It is also more safe to use a javascript approach for cross-browser compatibility.

Using in tool tip and change the default color of a tool tip

8 Answers8

Using
in tool tip and change the default color of a tool tip