The info tooltip is extremely useful in case you want to provide your end users with more information on a specific chart. You can describe what is being visualized and what the data means for example.
A huge advantage is that you don’t need to add text-objects anymore. As such, you can keep your dashboard clean. Let’s dive into more details!
The info tooltip can be activated for every object that contains dataslots (e.g. not the image or text object). You can easily add the desired description underneath ‘Annotate’ in the chart settings.
Once activated, an info-icon appears in the top left corner of the chart. Your description appears by clicking on it.
There are different options to play around with the layout and change the visual effect of the info tooltip as you desire.
Underneath the ‘Annotate’ option in the chart settings, you can choose to display the info-icon on the top left or right corner.
In the info tooltip window, you can also add HTML code to change the text layout of your description.
<h5 style="color: #00a8b7; font-weight: 400;">What does this number mean?</h5>
<small> Number of people working in the specific department 🧍♂️
</small>
In the overall dashboard settings underneath ‘Advanced’, you can inject CSS code to play around with the colors and other layout elements.
.info-tooltip {
background-color: rgba(5, 80, 79, 0.7) !important;
color: white !important;
font-size: 16px !important;
}
.info-tooltip::after {
border-bottom: 6px solid #090a4e !important;
}