Show long text in Tooltip

As we all know, standard ToolTip property of ASP.NET server controls is having a limit of number of characters. Means if you have a long text of say, 10-12 lines, and some hundreds of words, the tooltip will be truncated in browser after a certain limit.

JQuery plugin is providing its own control to deal with this limit. But, in case, your project has not included JQuery libraries, you can still achieve this by writing some javascripts and attaching them in your controls.

For this, you first need to write javascript methods that will overwrite default behavior of tooltip. Technically speaking, you need to write methods for "onmouseover" and "onmouseout" respectively as follow:


function showCustomTooltip(hostControl) {
//hostControl = control where you want to override Tooltip
var tooltipText = hostControl.title;
var toolTipContainer = document.createElement('SPAN');
var textNode = document.createTextNode(tooltipText);
toolTipContainer.appendChild(textNode);
hostControl.parentNode.insertBefore(toolTipContainer, hostControl.nextSibling);
toolTipContainer.className = "customTooltipCss";
hostControl.title = "";
}
function hideCustomTooltip(hostControl) {
var controlText = hostControl.nextSibling.childNodes[0].nodeValue;
hostControl.parentNode.removeChild(hostControl.nextSibling);
hostControl.title = controlText;
}

next thing is to, attach this methods to the controls where you want to show tooltip. Say, the control name is "lblInfo"

protected void Page_Load(object sender, EventArgs e)
{
lblInfo.Attributes.Add("onmouseover", "showCustomTooltip(this)");
lblInfo.Attributes.Add("onmouseout", "hideCustomTooltip(this)");
}

Finally, as you can in the JavaScript code that I have assigned "className" property to "customTooltipCss" we need to add this class in CSS file (or whatever method you are using for accessing styles in your page.)


.customTooltipCss
{
position: absolute;
width: 400px;
margin: 1px;
padding: 2px;
background: #FFFFBB;
border: 1px solid lightgray;
}

That's all we need to do.
Please see screenshot to see how the tooltip appears while implemented using above method.

CodeProject