Tooltip

13 Feb 20183 minutes to read

• HeatMap provides support to show tooltip when mouse hovers over any rows/columns.

• To show/hide the tooltip of heatmap, use enableTooltip property.

• To show tooltip on mouse over, the tooltipSettings property of model needs to be set with the tooltipSettings templateId and position.

• The trigger property specify the event action to showcase the tooltip.

Animation Effects

Determines the type of effect that takes place when showing/hiding the tooltip.

We can specify the effect and the speed for the animation using animation property.

position

• The position object defines various attributes of the Tooltip position, including the element it is positioned in relation to, and how the position is adjusted within the defined container.

• The associate property is used to position the tooltip in relation with the target element.It can also be set to ‘mouse’ or the window, or an absolute x/y position on the page.

• The target property is used to position the tooltip based on the associate property. You can position the tooltip at current mouse position when associate property set as mouseenter. It also possible to place the tooltip relation to the window when associate property set as window and can set target horizontal and vertical properties to position tooltip horizontal/vertical.

• To enable the arrow in tooltip, use isBalloon property.

• To set the arrow position against popup, use stem horizontal and vertical property.

Please refer to the below code example which shows how to use tooltip in heatmap.

HTML

<!--Define tooltip template-->
<script type="text/x-jsrender" id="mouseovertoolTipId">
    <div class="tooltip-style">Custom Tooltip
        <div style="height:0px;width:100%;border:1px solid white;"></div>
            <table>
                <tr>
                    <td style="width:50px;">Year  </td>
                    <td></td>
                </tr>
                <tr>
                    <td>Value  </td>
                    <td></td>
                </tr>
            </table>
    </div>
</script>

JS

$("#heatmap").ejHeatMap({
    //Defines mouse over tooltip
    toolTipSettings: {
        templateId:"mouseovertoolTipId",
        associate:"mouseFollow",
        position: {
            stem: { horizontal: "left", vertical: "top" }
            };
         }
    });