# Bunifu ToolTip

**Bunifu ToolTip** is an elegantly new and unique way of providing "content-over-control" capabilities when needing to display extra information for controls, features, and more. It is a total rewrite of the standard [Windows Forms ToolTip](https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.tooltip?view=netframework-4.7.2) yet incorporating some of its features for consistency within the .NET Ecosystem.

Here's a preview of Bunifu ToolTip in action:

![](https://downloads.intercomcdn.com/i/o/90904331/88ffd61572738609f9131c0b/bunifu-tooltip-demo.gif)

## Adding Bunifu ToolTips at Design Time

To add a Bunifu ToolTip at design-time, simply locate the **BunifuToolTip** component from the Toolbox, then drag it to your Form or User Control.

![](https://downloads.intercomcdn.com/i/o/90861399/b6197b1f1a9c9cf6299a1906/toolbox-item.png)

Once you drag-and-drop the component, you'll see it placed down below the components area - from there, you can move n to click the small **Play** button at the right corner of the component to easily change its properties:

![](https://downloads.intercomcdn.com/i/o/90862348/e4db61a5d1a149dd4aa92683/bunifu-tooltip-design-time.png)

You can likewise go to the **Properties** section to fully customize its behavior and appearance:

![](https://downloads.intercomcdn.com/i/o/90864380/2d483e415c902ac0ceb138e1/bunifu-tooltip-sample-properties.png)

## Setting a control's ToolTip at Design Time

Once you've added the ToolTip to your Form or User Control, the required properties will be included in all of the available controls.

You can then go ahead and set the properties provided in any control. Here' we will use a [Bunifu Image Button](https://docs.bunifuframework.com/ui-for-winforms-docs/ui-controls-docs/bunifu-image-button-new) as an example:<br>

![](https://downloads.intercomcdn.com/i/o/90867890/19274262f9fa5e458dd750ed/bunifu-image-button-tooltip-sample.png)

Now let's run our sample Windows Forms project:

![](https://downloads.intercomcdn.com/i/o/90869941/b178f321303162f45c24fa0e/bunifu-tooltip-sample-1.gif)

As a quick tip, if you've categorized your Properties as shown in the example, you can easily navigate to where you'll see the **Bunifu ToolTip: Properties** section; there you'll find the properties available for every control added in your Form or User Control. You can however also navigate to where you will see the same listed properties as shown above, namely (beginning with), **ToolTip on BunifuToolTip...**, **ToolTipIcon on BunifuToolTip...**, and **ToolTipTitle on BunifuToolTip...**&#x20;

Also note that the above names of each Bunifu ToolTip added have not been specified. In **C#**, for example, the naming is usually (by default) in camel-case format, e.g. **bunifuToolTip** while in VisualBasic, the naming is usually in pascal-case format, e.g. **BunifuToolTip**. For beginners, this format will guide you in determining where to find the properties if you happen to get lost.

Let's now proceed to setting the Bunifu Image Button's **ToolTip Title** and **Icon** properties:<br>

![](https://downloads.intercomcdn.com/i/o/90872618/22e83b26e7da34aa31acddaa/bunifu-tooltip-sample-2.1.gif)

That's it! We can then run our project...

![](https://downloads.intercomcdn.com/i/o/90873613/f553ba2c2e8bb648adce68a7/bunifu-tooltip-sample-2.2.gif)

If, for example, you would prefer to change the Title's font, this you can do simply by selecting the ToolTip and going to the **Properties** section, then choose a font from the **TitleFont** property. You can also do the same by accessing the ToolTip's **Smart Tags**:<br>

![](https://downloads.intercomcdn.com/i/o/90884035/217381cb6078eaaf45a8a506/bunifu-tooltip-sample-2.3.gif)

As shown in the short illustration, we have changed the ToolTip's **Title f**ont to [Rosemary](https://www.ffonts.net/Rosemary.font.download) while maintaining our ToolTip's **Text** font.

Here's what it will look like once we run our project:

![](https://downloads.intercomcdn.com/i/o/90884741/378dde4399e96da04d174fad/bunifu-tooltip-sample-2.4.gif)

To implement and apply a Bunifu ToolTip for controls programmatically, use the **SetToolTip** method. Here's an example:

{% tabs %}
{% tab title="C#" %}

```csharp
// "bunifuImageButton1" is the control to display the ToolTip. 
bunifuToolTip1.SetToolTip(bunifuImageButton1, "This is my first tooltip!");
// You can also set the ToolTip Title and/or Icon property.
bunifuToolTip1.SetToolTipTitle(bunifuImageButton1, "Hello there...");
bunifuToolTip1.SetToolTipIcon(bunifuImageButton1, Image.FromFile("c:\\icon.png"));
```

{% endtab %}

{% tab title="VB.NET" %}

```
' "bunifuImageButton1" is the control to display the ToolTip. 
BunifuToolTip1.SetToolTip(BunifuImageButton1, "This is my first tooltip!") 
' You can also set the ToolTip Title and/or Icon property.
BunifuToolTip1.SetToolTipTitle(BunifuImageButton1, "Hello there...") 
BunifuToolTip1.SetToolTipIcon(BunifuImageButton1, Image.FromFile("c:\icon.png"))
```

{% endtab %}
{% endtabs %}

You may find yourself in a situation where you need to display a ToolTip to a control once an action is performed such as clicking a Button. In such cases, the Bunifu ToolTip's **Show** method comes in handy. With this method, you can display ToolTips on controls without the need of doing so at design-time.

Here is an example where once a user clicks on a[ Bunifu Button](https://docs2.bunifuframework.com/docs/ui/controls/bunifu-button), a ToolTip appears in the[ Bunifu Image Button](https://docs2.bunifuframework.com/docs/ui/controls/bunifu-image-button-new) we already added to our Form:

{% tabs %}
{% tab title="C#" %}

```csharp
private void bunifuButton1_Click(object sender, EventArgs e)
{
    // Set a ToolTip for the added Bunifu Image Button.
    bunifuToolTip1.Show(bunifuImageButton1, "This is my first tooltip!");
    
}
```

{% endtab %}

{% tab title="VB.NET" %}

```
Private Sub BunifuButton1_Click(ByVal sender As Object, ByVal e As EventArgs) 
		Handles BunifuButton1.Click
	
	BunifuToolTip1.Show(BunifuImageButton1, "This is my first tooltip!")
	
End Sub
```

{% endtab %}
{% endtabs %}

Now let's see the above code in action:

![](https://downloads.intercomcdn.com/i/o/90919589/c32054dcef1aa468841e4788/bunifu-tooltip-sample-2.6.gif)

You can also choose to allow auto-closing the ToolTip after a period of time has reached using the property **`AllowAutoClose`**. This, together with the property **`AutoCloseDuration`** allow you to set flexible time-limits for hiding the ToolTip if shown.

Here is an example with the property **`AllowAutoClose`**&#x65;nabled and the property **`AutoCloseDuration`**&#x73;et to the default 5000 (the unit is in milliseconds):

![](https://downloads.intercomcdn.com/i/o/90921325/9965a73f2cba199bc6ca653d/bunifu-tooltip-sample-2.7.gif)

The code for the above behavior is as shown below:

{% tabs %}
{% tab title="C#" %}

```csharp
bunifuToolTip1.AllowAutoClose = true;// 
bunifuToolTip1.AutoCloseDuration = 5000;
```

{% endtab %}

{% tab title="VB.NET" %}

```
BunifuToolTip1.AllowAutoClose = True
BunifuToolTip1.AutoCloseDuration = 5000
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
Units for time are in milliseconds
{% endhint %}

![](https://downloads.intercomcdn.com/i/o/90931959/fb91513a191718c259744f6c/bunifu-tooltip-sample-2.8.gif)

Let's take a look at these additional features...

Below are the color-properties provided in Bunifu ToolTips:

* &#x20;**`BackColor`:** Sets the ToolTip's background color.
* &#x20;**`BorderColor`:** Sets the ToolTip's border color.
* &#x20;**`TitleForeColor`:** Sets the ToolTip's title-fore-color.
* &#x20;**`TextForeColor`:** Sets the ToolTip's text-fore-color.

With Bunifu ToolTip comes HTML content-formatting, meaning that you can fully format the Title and Text content with both **HTML Tags** such as **Bold** (**), Italic** (), **Underline** (), and **inline CSS** **properties** such as **color**, **background-color**, **font-family,** and **font-size** properties.

**Here's an illustration of our previous example, now including some HTML:**

![](https://downloads.intercomcdn.com/i/o/97766141/a48b2dd261557866a3ebb328/bunifu-tooltip-sample-2.9.gif)

**Here's a final preview of the above illustration in action:**

![](https://downloads.intercomcdn.com/i/o/97767152/13f41b77b47e521f4c925589/bunifu-tooltip-sample-3.0.gif)

**Here's a great addition... You may at times prefer to provide an alternative Control of your own to be displayed instead of the standard ToolTip provided. Well, with Bunifu ToolTip, you can...**

**Using the property `DisplayControl`**, you can provide your own individual control whenever the ToolTip pops-up in-place of the default display. Since this property is not accessible from the Properties window, you'll need to access it via code-view.

Here's a sample code showing the implementation using a created Control named "**MyUserControl**":

{% tabs %}
{% tab title="C#" %}

```csharp
bunifuToolTip1.DisplayControl = new MyUserControl();
```

{% endtab %}

{% tab title="VB.NET" %}

```
BunifuToolTip1.DisplayControl = New MyUserControl()
```

{% endtab %}
{% endtabs %}

Here's an illustration showing how to set a User Control as the ToolTip:<br>

![](https://downloads.intercomcdn.com/i/o/97782718/ae923464fbf7a74e8774f892/bunifu-tooltip-sample-3.2.gif)

And here's a preview of the illustration in action:<br>

![](https://downloads.intercomcdn.com/i/o/97782852/189a15e4b25e0cc65fd4de45/bunifu-tooltip-sample-3.1.gif)

At times, you may find the need to show your own User Control right after a user clicks on the associated ToolTip control. We'll, the same can be achieved simply by setting the property `ClickToShowDisplayControl` to `true`.\
Here's some sample code:

{% tabs %}
{% tab title="C#" %}

```csharp
bunifuToolTip1.ClickToShowDisplayControl = true;
```

{% endtab %}

{% tab title="VB.NET" %}

```
BunifuToolTip1.ClickToShowDisplayControl = True
```

{% endtab %}
{% endtabs %}

\
With this feature, you can go a notch higher and allow your Display User Control to be shown only when the associated ToolTip control is clicked. This way, you will maintain the ToolTip to be displayed and your User Control. This can really come in-handy whenever you're working with Title Bar Icons.

Here's a preview of this feature in action:

![](https://downloads.intercomcdn.com/i/o/98150922/6fe05526d90f2fa02c982b39/bunifu-tooltip-sample-3.3.gif)

## Properties

### **`Active`:**&#x20;

Gets or sets a value indicating whether the ToolTip is active. ToolTips will only appear if this property is set to `true`.

### **`ConvertNewlinesToBreakTags`:**&#x20;

Gets or sets a value indicating whether to allow conversion of newline characters in content to HTML break tags.

### **`ShowAlways`:**&#x20;

Determines if the tool tip will be displayed always, even when the parent window is not active.

### **`ShowIcons`:**&#x20;

Gets or sets a value indicating whether the ToolTip will. display icons if the associated control or controls have specified one.

### **`OverrideToolTipTitles`:**&#x20;

When set to true, all ToolTip Titles set in each control will be replaced with the default `ToolTipTitle`  provided.

### **`AlignTextWithTitle`:**&#x20;

When set to true, the `ToolTipText`  will be aligned horizontally with the `ToolTipTitle` 's position. This is especially useful whenever the `ToolTipIcon` is set.

### **`ShowShadows`:**&#x20;

Gets or sets a value indicating whether display-shadows will be provided around the ToolTip's borders.

### &#x20;**`ShowBorders`:**&#x20;

Gets or sets a value indicating whether standard borders will be drawn around the ToolTip's region.\
\&#xNAN;**`AllowFading`:** When set to true, a fade effect is used when ToolTips are shown or hidden.

### **`AllowAutoClose`:**&#x20;

When set to true, the ToolTip will be closed automatically when a set period of time provided by the property `AutoCloseDuration` **,** is given. However, when set to false, the ToolTip will be closed once the mouse leaves the associated control.

### **`Padding`:**&#x20;

Gets or sets the ToolTip's inner padding between the container and its content, that is, the `Title`  and `Text`  information.

### **`ToolTipTitle`:**&#x20;

Gets or sets the global `ToolTipTitle`  to be implemented across all associated controls within the parent control. This feature will only be active whenever the property `OverrideToolTipTitles`  is set to `true`.

### **`Opacity`:**&#x20;

Gets or sets the opacity of transparency-level of the ToolTip.

### **`InitialDelay`:**&#x20;

Gets or sets the length of time, in milliseconds, it takes before the ToolTip is shown.

### **`ReshowDelay`:**&#x20;

Gets or sets the length of time, in milliseconds, it takes before subsequent ToolTips are shown.

### **`AutoCloseDuration`:**&#x20;

Gets or sets the length of time, in milliseconds, that the ToolTip will be displayed. This property is enabled whenever the property `AllowAutoClose` is set to true.

### **`EntryAnimationSpeed`:**&#x20;

Gets or sets the ToolTip's entry animation speed in milliseconds.

### **`ExitAnimationSpeed`:**&#x20;

Gets or sets the ToolTip's exit animation speed in milliseconds.

### **`IconMargin`:**&#x20;

Gets or sets the margin (distance) between the `ToolTipIcon` and `ToolTipTitle`.

### **`TextMargin`:**&#x20;

Gets or sets the `ToolTipText`  margin, that is, the distance between the `ToolTipTitle`  and the `ToolTipText` .

### **`BackColor`:**&#x20;

Gets or sets the ToolTip's background color.

### **`BoderColor`:**&#x20;

Gets or sets the ToolTip's border color.

### **`TitleForeColor`:**&#x20;

Gets or sets the ToolTip's Title ForeColor.

### **`TextForeColor`:**&#x20;

Gets or sets the ToolTip's Text ForeColor.

### **`TitleFont`:**&#x20;

Gets or sets the ToolTip's Title Font.

### **`TextFont`:**&#x20;

Gets or sets the ToolTip's Text Font.

### **`Visible`:**&#x20;

Determines if the ToolTip is currently visible.

### **`DisplayControl`:**&#x20;

Gets or sets a control that will be displayed in the ToolTip in-place of the standard ToolTip's view.

### **`ClickToShowDisplayControl`:**&#x20;

Gets or sets a value indicating whether the attached `DisplayControl` will be displayed once a user clicks on the associated ToolTip control.

### **`ToolTipPosition`:**&#x20;

Gets or sets the ToolTip's position within the client region.

## **Methods**

### `Show`

`Show(Control[Control], Text[string], Optional:Title[string], Optional:Icon[Image], Optional:Location[Point])`: Sets the ToolTip content to be associated with the specified control and displays the ToolTip.

### **`Hide`**

&#x20;`Hide()` : Hides the ToolTip when displayed in any associated control(s).

### **`RemoveALl`**

`RemoveAll()` : Removes all the applied ToolTips currently associated with the ToolTip component.

### **`CanExtend`**

`CanExtend(object extendee)` : Returns true if the ToolTip can offer an extender property to the specified target component.

## Events

### `Popup` :&#x20;

Raised whenever the ToolTip is being shown. Includes the `PopupEventArgs`  event arguments for handling the associated Control and ToolTip.

### `Closed` :&#x20;

Raised whenever the ToolTip is being closed.
