Reputation: 10672

Using <br/> in tool tip and change the default color of a tool tip

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.";

Upvotes: 2

Answers (8)

Muhammad Akhtar

Reputation: 52241

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

Upvotes: 1

Muthuvijayan

Reputation: 21

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

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

Upvotes: 2

BrunoLM

Reputation: 100331

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.

Upvotes: 0

NakedBrunch

Reputation: 49413

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/

Upvotes: 1

Town

Reputation: 14906

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..

Upvotes: 0