How to Create a Custom CSS Tooltip on Node Hover in OrgChart JS (Full Guide + Code)

If you want to enhance the user experience in your OrgChart JS charts, adding CSS-driven tooltips is one of the most effective improvements. Tooltips allow users to quickly view additional node information—such as a job title, description, or metadata—without cluttering the node design.

Full code example

In this tutorial, we’ll show you step-by-step how to build a beautiful animated CSS tooltip that appears when hovering over any node in OrgChart JS.

This approach gives you:

• Fully custom tooltip styling

• Smooth animations

• Precise positioning

• No modification to OrgChart templates

• Works with any OrgChart JS theme or custom template

Let’s get started.

Why Use Custom CSS Tooltips in OrgChart JS?

OrgChart JS provides built-in templates and field bindings, but a custom tooltip gives you:

✔ Better branding

Match your company’s colors, fonts, and style.

✔ More flexibility

Tooltips can show long text, HTML, or dynamic content.

✔ Improved usability

Users often need quick details without opening a full node dialog.

Step 1: Create a Tooltip Container

The tooltip sits outside the chart and is positioned dynamically.

<div id="tooltip" class="chart-menu">
    <div class="tooltip tooltip-west">
        <span class="tooltip-content"></span>
    </div>
</div>
<div id="tree"></div>

This structure supports complex CSS animation and arrow styling.

Step 2: Initialize OrgChart JS and Bind Tooltip Content

We use the tooltip field inside the node data:

var chart = new OrgChart(document.getElementById('tree'), {
    template: 'ana',
    nodeBinding: {
        tooltip: 'tooltip'
    }
});

Load sample nodes:

chart.load([
    { id: 0, name: "node0", tooltip: 'At vero eos et accusamus et iusto odio' },
    { id: 1, name: "node1", pid: 0, tooltip: 'Lorem ipsum dolor sit amet...' },
    { id: 2, name: "node2", pid: 0, tooltip: 'Sed ut perspiciatis unde omnis...' },
    ...
]);

Each node now has custom tooltip text.

Step 3: Add Hover Events on Nodes

OrgChart JS renders nodes as SVG elements, so we detect hover using the redraw event.

The following code:

• Finds all nodes

• Detects mouseover and mouseleave

• Reads the tooltip field

• Uses OrgChart._menuPosition() to calculate exact coordinates

chart.on('redraw', function (sender) {
    var fieldElements = sender.element.querySelectorAll('[data-n-id]');
    for (var i = 0; i < fieldElements.length; i++) {
        var fieldElement = fieldElements[i];
        fieldElement.addEventListener('mouseover', function () {
            var nodeElement = this;
            while (!nodeElement.hasAttribute('data-n-id')) {
                nodeElement = nodeElement.parentNode;
            }
            var id = nodeElement.getAttribute('data-n-id');
            var tooltip = document.getElementById("tooltip");
            var tooltipContent = document.querySelector(".tooltip-content");

            var position = OrgChart._menuPosition(this, tooltip, sender.getSvg());
            tooltipContent.innerHTML = sender.get(id).tooltip;

            tooltip.style.left = position.x + 250 + "px";
            tooltip.style.top = position.y + "px";

            tooltip.classList.add("visible");
        });

        fieldElement.addEventListener('mouseleave', function () {
            var tooltip = document.getElementById("tooltip");
            if (tooltip) {
                tooltip.classList.remove('visible');
            }
        });
    }
});

This gives you a fully dynamic tooltip tied to the hovered node.

Step 4: Add CSS for the Tooltip Animation

Here is the full CSS used for this example.
It includes:

• Smooth opacity transitions

• 3D rotation animation

• Tooltip arrow

• West/east variants

• Font and color configuration

html, body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin:0;
  overflow: hidden;
  font-family: Helvetica;
}

#tree{
  width:100%;
  height:100%;
}

.tooltip {
    position: absolute;
    z-index: 999;
    width: 2.2em;
    height: 2.2em;
    cursor: pointer;
}

/* Tooltip bubble */

.tooltip-content {
    position: absolute;
    background: #F57C00;
    z-index: 9999;
    width: 200px;
    bottom: 50%;
    margin-bottom: -1em;
    padding: 20px;
    border-radius: 20px;
    font-size: 1.1em;
    text-align: center;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}

.tooltip-west .tooltip-content {
    left: 33px;
    transform-origin: -2em 50%;
    transform: translate3d(0,50%,0) rotate3d(1,1,1,30deg);
}

.visible .tooltip .tooltip-content {
    opacity: 1;
    transform: translate3d(0,50%,0) rotate3d(0,0,0,0);
    pointer-events: auto;
}

/* Tooltip arrow */

.tooltip-content::after {
    content: '';
    position: absolute;
    width: 2em;
    height: 2em;
    top: 50%;
    margin-top: -1em;
    background: url(https://balkan.app/OrgChartJS-Demos/customTemplateTooltip.svg)
        no-repeat center;
    background-size: 100%;
}

.tooltip-west .tooltip-content::after {
    right: 99%;
}

The result is a smooth, animated tooltip that feels native to the OrgChart experience.

Final Result

After following these steps, you now have:

✔ A custom CSS tooltip

✔ Triggered on node hover

✔ Dynamic positioning based on node location

✔ Full styling control

✔ Works with any OrgChart JS template

This method is ideal for showing:

• Job descriptions

• Department details

• Employee notes

• Contact information

• Extra metadata

Tooltip on node hover with OrgChart JS

Conclusion

Adding a CSS tooltip to OrgChart JS is a powerful way to improve usability without modifying your node template. With just a bit of JavaScript and CSS, you can create professional, animated tooltips that deliver richer information to your users.

If you want to go deeper, consider:

• HTML-rich tooltips

• Tooltips with images or icons

• Tooltips triggered by custom buttons inside nodes

• Mobile-friendly long-press activation

Want help building a custom OrgChart JS feature?
Just ask!