Tooltips

ApexTree can show a tooltip when the user hovers a node. Tooltips are off by default; enable them and optionally supply a custom template.

Enabling tooltips

const tree = new ApexTree(document.getElementById('chart'), {
  enableTooltip: true,
})
tree.render(data)

With no tooltipTemplate, the default tooltip shows the node's name.

Custom tooltip template

tooltipTemplate receives the node's resolved content and returns an HTML string. Set tooltipPadding: 0 when supplying a template that manages its own padding:

const tree = new ApexTree(el, {
  enableTooltip: true,
  tooltipPadding: 0,
  tooltipTemplate: (content) => `
    <div style="padding:8px 12px;">
      <strong>${content}</strong>
      <div style="font-size:12px;color:#64748B;">Click to expand</div>
    </div>
  `,
})
tree.render(data)

The content argument mirrors nodeTemplate — it is the value at contentKey. With contentKey pointing at a data object, you can render rich tooltip content:

const tree = new ApexTree(el, {
  contentKey: 'data',
  enableTooltip: true,
  tooltipPadding: 0,
  tooltipTemplate: (content) => `
    <div style="padding:8px 12px;min-width:160px;">
      <div style="font-weight:600;">${content.name}</div>
      <div style="font-size:12px;color:#64748B;">${content.title}</div>
      <div style="font-size:12px;">${content.email ?? ''}</div>
    </div>
  `,
})

Tooltip options

Option	Type	Default	Description
enableTooltip	boolean	false	Show a tooltip on node hover
tooltipBGColor	string	'#FFFFFF'	Background color
tooltipBorderColor	string	'#BCBCBC'	Border color
tooltipFontColor	string	'#000000'	Text color
tooltipFontSize	string	'12px'	Text size
tooltipMinWidth	number	100	Minimum width in pixels
tooltipMaxWidth	number | undefined	undefined	Maximum width; unconstrained when unset
tooltipPadding	number	8	Inner padding; set to 0 with a custom template
tooltipOffset	number	10	Distance from the cursor in pixels
tooltipId	string	'apextree-tooltip-container'	HTML id of the tooltip container

Styling example

const tree = new ApexTree(el, {
  enableTooltip: true,
  tooltipBGColor: '#0F172A',
  tooltipBorderColor: '#1E293B',
  tooltipFontColor: '#F1F5F9',
  tooltipFontSize: '13px',
  tooltipMinWidth: 140,
  tooltipMaxWidth: 260,
  tooltipOffset: 14,
})

Per-node tooltips

Tooltip options can be overridden per node via NestedNode.options, so a specific node can have a different tooltip style (or its own template) from the rest of the tree:

const data = {
  id: 'ceo',
  name: 'Alice',
  children: [
    {
      id: 'vp',
      name: 'Bob',
      children: [],
      options: {
        enableTooltip: true,
        tooltipBGColor: '#FEF3C7',
        tooltipFontColor: '#92400E',
      },
    },
  ],
}

See Data Format for how per-node options layer onto the global config.

React example

import { ApexTreeChart } from 'react-apextree'

const options = {
  enableTooltip: true,
  tooltipPadding: 0,
  tooltipBGColor: '#0F172A',
  tooltipFontColor: '#F1F5F9',
  tooltipTemplate: (content: string) =>
    `<div style="padding:8px 12px"><strong>${content}</strong></div>`,
}

export default function TooltipTree() {
  return <ApexTreeChart data={data} options={options} />
}