How to add a close button to C1SuperTooltip

December 28 2023

C1Supertooltip for Winforms has been a revolution when it comes to the requirement to customize the appearance of the tooltip. Sometimes we need the tooltips to stay longer than the usual time while hovering on various controls. Usually ToolTip disappears as soon as the mouse is moved from the control. In this blog, we overcome the above limitation by adding a Close button to a C1SuperTooltip, which can be used to close the tooltip when required. This implementation is helpful for the scenarios where there are some hyperlinks associated with a C1Supertooltip and need time to click those links to open them. For the discussed implementation, we would need to set few properties like HitTestVisible to make the tooltip clickable and IsBalloon to show it in balloon shape. Following code block shows the implementation:

// _c1Tooltip refers to C1SuperToolTip  
InitializeComponent();  
_c1Tooltip.HitTestVisible = true; //determines whether the tooltip can be clicked.  
_c1Tooltip.IsBalloon = true; //Showing tooltip in a balloon shape.

Here we have added an image of close button to the text associated with the C1SuperToolTip and then formatted with the same:

// show the tooltip when the user hovers over the button(_btn)  
_btn.MouseHover += (s, e) =>  
{  
var fmt =  
"<table><tr>" +  
"<td style='width:200'>{0}</td>" +  
"<td><a href='close'><img src='res://close'/></a></td>" +  
"</tr></table>";  
var txt =  
"<b>Tooltip with Close Button</b><br/>" +  
"This is a tooltip.<br/>" +  
"You can close it by clicking the close button " +  
"at the top right corner of the tooltip.<br/>" +  
"Or you can click somewhere else on the screen...";  
var tip = string.Format(fmt, txt);  
// show the tooltip  
\_c1Tooltip.Show(tip, \_btn);  
};

Now after adding the Close button image and related text to the C1SuperToolTip, we need to close it when the mouse clicks on the close button:

// close tooltip when user clicks the close button  
_c1Tooltip.LinkClicked += (s, e) =>  
{  
   _c1Tooltip.Hide();  
};

Now we can close the ToolTip after user moves the Form:

// close tooltip when user moves the form  
this.Move += (s, e) =>  
{  
  _c1Tooltip.Hide();  
};

Incase you need some specific time duration associated with the tootip, then you may use the following code snippet in the attached sample to show the tooltip say for 3 secs as given in the code below:

private void \_c1Tooltip\_Popup(object sender, C1.Win.C1SuperTooltip.PopupEventArgs e)  
{  
   // keep tooltip visible for 3 seconds even if the mouse moves  
   _c1Tooltip.Show(e.Text, e.Control, 4000);  
}