> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/bdb-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/bdb-documentation/data-visualization/governed-dashboards/configuration/tooltip-default-and-custom.md).

# Tooltip(Default & Custom)

{% hint style="success" %}
*Check out the walk-through given below on how to Tooltip are configured in the Designer charting components.*
{% endhint %}

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2F9Z4TKKq1wAJJln3wFoYM%2FTooltip%20for%20charts.gif?alt=media\&token=00540abb-8261-463e-9cb6-d49f16265307)

* The Tooltip property block is available under the component property section.     

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FvchBDl2owGzYDnm81POr%2Fimage.png?alt=media\&token=06aca098-a384-45b1-a595-f13fb854011d)

* Tooltip block contains ‘Show Tool Tip ’, ‘Background Color ’, ‘Opacity ’, ‘Border Color ’, ‘Box Width ’, ‘Precision ’ & ‘Highlighter ’.
  * Show Tool Tip: Configures tooltip as Default, Custom, or None.
  * Background Color: Configures tooltip background color.
  * Opacity: Configures tooltip background color opacity.
  * Border Color: Configures the border color of the tooltip.
  * Box Width: Configures the width of the tooltip box it contains a select box from where width can assign to the tooltip box.
  * Precision: Configures the tooltip display data precision.
  * Highlighter: By enabling this property through the checkbox tooltip highlighted field background color change.
* Show Tool Tip: By clicking this a model box opens which contains three radio buttons, its default selection is ‘Default ’
  * None: On selection of None, the tooltip doesn't be shown on the selected component.
  * Default: It's by default a selected tooltip, that displays the default configuration of the selected component.    
  * Custom: On selection of Custom, tooltip content can be configured. 

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FdexRAvApupKPN5gVNfcX%2Fimage.png?alt=media\&token=f5ec430d-4133-42b8-bdb8-df7c90267068)

* Custom Tool Tip: On selection of Custom, an editable text box opens.
* Editable text box contains property buttons on top, a select box that contains all the fields of the data set, and a save and cancel button.
* Editable text box contains selected fields of data set by default.

     ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2F39uZK2bJA74frycn9u8K%2Fimage.png?alt=media\&token=92794a9f-e5b1-4e91-b16c-ad269ec680c3)

* Custom Tooltip configuration

  * Additional fields can be selected from the select box.

  ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FCUxihIAawun75MT2xa4J%2Fimage.png?alt=media\&token=1e365d97-74b2-41d1-b07e-de8b5da75c1f)
* Display name then field name inside the bracket, field data replaces brackets.
* After selection of the content font properties like font color, font size, font family, etc can be changed from property buttons.

      ![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FHi6v633UIAlxUjca29O3%2Fimage.png?alt=media\&token=a104e87e-abd6-4efd-acf7-44b1b96f9d69)

* **\<htmlTag>\</htmlTag>**: With the help of this tag, any HTML content can be passed directly into tooltip.
* Video and image can be displayed in the tooltip through this HTML tag.
* The field which contains video links that name would be written in the brackets after "scr=" for example src=\[Field Name]. For displaying a single video or image the only link to that particular video or image need to give under "src=" for example src="<https://www.bdbizviz.com/resources/images/BDB\\_logo.png>"
* Font Color property does not support Internet Explorer.
* For changing the field data font property, you need to select the entire bracket otherwise value won’t be displayed in the tooltip.

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FiavRO9B8V7NOGdEBSgfL%2Fimage.png?alt=media\&token=32cce3f4-0ca2-4a8e-86d9-150e38e64c0c)

#### Mobile Tooltip configuration

* For Timeline, Bar, Heatmap & Pie mobile specific Tooltip is available.
* This Tooltip works only when the component is in maximized state.
* Default Tooltip can be enabled through this script-->

```
// SSDK.getWidget( 'ComponentID').m_mobiletooltipstyle = "default";ome code
```

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2Fn8cTEmU8qb4jRZDCy96f%2Fimage.png?alt=media\&token=d57d558d-1f18-4de3-8455-fc39cb9c0c81)

&#x20;