This project is read-only.

htmlTooltip hide border

Nov 21, 2013 at 2:15 PM

I am trying to use htmlTooltip in one of my project. I want to make it completely custom look so I want to pass everything as html. The problem is it shows the border/edges and my html has some padding from every position. Is there a way to make that border area of tooltip disappear and just show my content as tooltip? Followint is the screen shot of current and desired output.


Nov 22, 2013 at 3:22 PM
The HtmlToolTip uses htmltooltip CSS class for its style defined like so:
.htmltooltip {
    border:solid 1px #767676;
    padding: 8px; 
    Font: 9pt Tahoma;
if you want to change that you need to provide BaseStylesheet and use htmltooltip class like so:
_htmlToolTip.BaseStylesheet = ".htmltooltip { border:none; background-color:lightblue; background-gradient:none; padding: 0px; }";
Note: You must overwrite all the properties you want to change.

Nov 24, 2013 at 7:07 PM
Hello ArthurTep,

It did work thanks. Now I am facing another problem. The tooltip is not aligned properly. It shows alot far from the mouse cursor. Here is the image.


Here is the html that I am trying to display
<div style = "font-family:'Trebuchet MS'; width:300px;";>
    <div id = "header" style = "background-color:#0085C3;color:#ffffff;font-size:12px;height:18px;padding-top:3px;text-align:center;">
        More Information

    <div id = "content" style = "background-color:#ffffff;color:#0085C3;font-size:12px;padding:5px;">
Now if I remove the width:300px from the top div, it works fine but my tooltip text is too big and I need to make it multiple lines, like the one in the screenshot. Do you have any solution for it?

Thanks very much.
Nov 25, 2013 at 8:59 AM
weird, will look into it.
BTW, your images don't show
Nov 25, 2013 at 12:16 PM
Here is the direct link to the image

Nov 25, 2013 at 12:37 PM
Here is another example. Try to set the tooltip text to following text
The Database Timeout setting affects every node in this cluster. You can set:<br/><br/>Connection Timeout<br/>The amount of time allowed to establish a connection to the database.<br/><br/>Command Timeout<br/>Command timeout – The amount of time allowed for the database to process requests. If you are getting timeout error messages during data collection, increase this setting.
Now move the window (that contains the element which is going to show this tooltip) to the extreme right. You will see that tooltip will popup on extreme left side. It is something to do with the calculation of the width of tooltip I believe.
Nov 30, 2013 at 4:29 PM
It was WinForms bug not correcting the tooltip show position when the size is dynamic.
Update to for the fix.
Let me know if you have issues.