The Tooltip Object

The ChartFactor tooltip utility is an object of type Tooltip that can be accessed in the following way:

const tooltip = cf.tooltip;

Everytime the user hovers a visualization, this object will render the tooltip at the mouse position with the content (string or html string) passed as parameter. Additionally it can be used also in custom applications with other elements besides the built-in visualizations.

const content = 'Hello User';
// content can be also a html string like: "<div>Hellow User</div>"
const color = 'orange';

cf.tooltip.set(content, color);
cf.tooltip.show();

The code above sets the content and border color of the toolkit and finally invokes the .show() function to render the following:

Additional css can be passed as a third parameter to the set function:

const customCss =  {
    'border-radius': '0px',
    'background-color': '#323232',
    'color': 'white'
};

cf.tooltip.set(content, color, customCss);

Finally to hide the tooltip we just need to call .hide():

cf.tooltip.hide()

For example let's say we want to display a tooltip when hovering a react component:

function CustomComponent() {
    const showTooltip = () => {
        cf.tooltip.set('My Message', 'red');
        cf.tooltip.show()
    }

    const hideTooltip = () => {
        cf.tooltip.hide()
    }

    return (
            <div onMouseMove={showTooltip}>
                 onMouseOut={hideTooltip}
                My component
            </div>);
}