Create a Tooltip for a ForeignObject Element Hover in OrgChart JS

How to Create a Tooltip for a ForeignObject Element Hover in OrgChart JS: A Beginner’s Guide

Creating tooltips can enhance user interaction with your organization chart, providing additional information in an intuitive and visually appealing manner. In this tutorial, we will guide you through the steps to create a tooltip for a foreignObject element hover in OrgChart JS, a powerful library for visualizing organizational charts.

Code example

Step 1: Setting Up Your Environment

First, make sure you have OrgChart JS integrated into your project. You can include the OrgChart JS library in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OrgChart with Tooltip</title>
    <script src="https://cdn.balkan.app/orgchart.js"></script>
</head>
<body>
    <div id="tree"></div>
    <script src="path/to/your-script.js"></script>
</body>
</html>

Replace "path/to/your-script.js" with the actual path to your JavaScript file. Add all the bellow code in your-script.js

Step 2: Creating SVG Elements

Define your SVG elements and tooltip structure:

let drive = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px">
<path fill="#1e88e5" d="M38.59,39c-0.535,0.93-0.298,1.68-1.195,2.197C36.498,41.715,35.465,42,34.39,42H13.61 c-1.074,0-2.106-0.285-3.004-0.802C9.708,40.681,9.945,39.93,9.41,39l7.67-9h13.84L38.59,39z"/>
<path fill="#fbc02d" d="M27.463,6.999c1.073-0.002,2.104-0.716,3.001-0.198c0.897,0.519,1.66,1.27,2.197,2.201l10.39,17.996 c0.537,0.93,0.807,1.967,0.808,3.002c0.001,1.037-1.267,2.073-1.806,3.001l-11.127-3.005l-6.924-11.993L27.463,6.999z"/>
<path fill="#e53935" d="M43.86,30c0,1.04-0.27,2.07-0.81,3l-3.67,6.35c-0.53,0.78-1.21,1.4-1.99,1.85L30.92,30H43.86z"/>
<path fill="#4caf50" d="M5.947,33.001c-0.538-0.928-1.806-1.964-1.806-3c0.001-1.036,0.27-2.073,0.808-3.004l10.39-17.996 c0.537-0.93,1.3-1.682,2.196-2.2c0.897-0.519,1.929,0.195,3.002,0.197l3.459,11.009l-6.922,11.989L5.947,33.001z"/>
<path fill="#1565c0" d="M17.08,30l-6.47,11.2c-0.78-0.45-1.46-1.07-1.99-1.85L4.95,33c-0.54-0.93-0.81-1.96-0.81-3H17.08z"/>
<path fill="#2e7d32" d="M30.46,6.8L24,18L17.53,6.8c0.78-0.45,1.66-0.73,2.6-0.79L27.46,6C28.54,6,29.57,6.28,30.46,6.8z"/>
</svg>`;

let tooltip = '<g data-t-id="{id}" transform="matrix(0.001,0,0,0.001,{x},{y})" ><path stroke="#FFCA28" fill="#fff" d="M 0,0 L -10,-10 H -85 Q -90,-10 -90,-15  V -65   Q -90,-70 -85,-70 H 85 Q 90,-70 90,-65 V -15 Q 90,-10 85,-10 H 10  L 0,0 z" ></path>{text}</g>';

let tooltipText = '<text text-anchor="middle" data-width="130" fill="#F57C00" x="0" y="-32">{val}</text>';

Step 3: Customizing the OrgChart Template

Customize the OrgChart template to include the SVG foreignObject and tooltip:

OrgChart.templates.ana.html = '<foreignobject class="node" style="font: 13px Helvetica;" x="20" y="10" width="200" height="100">' + drive + '{val}</foreignobject>';

let chart = new OrgChart(document.getElementById("tree"), {
  mode: 'dark',
  mouseScrool: OrgChart.action.none,
  nodeMouseClick: OrgChart.action.none,
  template: "ana",
  enableSearch: false,
  nodeBinding: {
    field_0: "name",
    html: "html",
    tooltip: 'tooltip'
  },
  nodeMenu: {
    details: { text: "Details" },
    edit: { text: "Edit" },
    add: { text: "Add" },
    remove: { text: "Remove" }
  }
});

Step 4: Adding Event Listeners for Hover Effects

Add event listeners to handle the tooltip display on mouseenter and mouseleave events:

chart.on('redraw', function (sender) {
  let fieldElements = sender.element.querySelectorAll('[data-n-id] foreignobject svg');
  for (let i = 0; i < fieldElements.length; i++) {
    let fieldElement = fieldElements[i];
    fieldElement.addEventListener('mouseenter', function () {
      let id = this.parentElement.parentElement.getAttribute('data-n-id');
      let tooltipElement = document.querySelector('[data-t-id="' + id + '"]');
      if (!tooltipElement) return;
      let transformStart = OrgChart._getTransform(tooltipElement);
      let transformEnd = transformStart.slice(0);
      transformEnd[0] = 1;
      transformEnd[3] = 1;
      OrgChart.animate(tooltipElement, { transform: transformStart }, { transform: transformEnd }, 300, OrgChart.anim.outBack);
    });
    fieldElement.addEventListener('mouseleave', function () {
      let id = this.parentElement.parentElement.getAttribute('data-n-id');
      let tooltipElement = document.querySelector('[data-t-id="' + id + '"]');
      if (!tooltipElement) return;
      let transformStart = OrgChart._getTransform(tooltipElement);
      let transformEnd = transformStart.slice(0);
      transformEnd[0] = 0.001;
      transformEnd[3] = 0.001;
      OrgChart.animate(tooltipElement, { transform: transformStart }, { transform: transformEnd }, 300, OrgChart.anim.inBack);
    });
  }
});

Step 5: Rendering the Tooltip

Render the tooltip when the chart is drawn:

OrgChart.events.on('render', function (sender, args) {
  for (let i = 0; i < args.res.visibleNodeIds.length; i++) {
    let node = sender.getNode(args.res.visibleNodeIds[i]);
    let data = sender.get(node.id);
    if (data.tooltip) {
      args.content += tooltip
        .replace('{x}', node.x + node.w / 2)
        .replace('{y}', node.y + 5)
        .replace('{id}', node.id)
        .replace('{text}', tooltipText.replace('{val}', OrgChart.wrapText(data.tooltip, tooltipText)));
    }
  }
});

Step 6: Loading Chart Data

Finally, load the chart data and include tooltips:

chart.load([
  { id: "1", html: "<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id pellentesque lacus.</div>", tooltip: '1 my fancy tooltip' },
  { id: "2", pid: "1", html: "<div>Mauris aliquam magna sapien. Ut a diam ac arcu commodo maximus.</div>", tooltip: '2 my fancy tooltip' },
  { id: "3", pid: "1", html: "<div>Phasellus eros felis, pellentesque quis ultrices nec, tempus ac felis.</div>", tooltip: '3 my fancy tooltip' }
]);

By following these steps, you can easily add tooltips on a foreignObject element hover in your OrgChart JS.

Tooltip in a foreignobject - OrgChart JS

	Create a Tooltip for a ForeignObject Element Hover in OrgChart JS						lightdark
Create a Tooltip for a ForeignObject Element Hover in OrgChart JS How to Create a Tooltip for a ForeignObject Element Hover in OrgChart JS: A Beginner’s Guide How to Create a Tooltip for a ForeignObject Element Hover in OrgChart JS: A Beginner’s Guide Creating tooltips can enhance user interaction with your organization chart, providing additional information in an intuitive and visually appealing manner. In this tutorial, we will guide you through the steps to create a tooltip for a `foreignObject` element hover in OrgChart JS, a powerful library for visualizing organizational charts. Code example Step 1: Setting Up Your Environment First, make sure you have OrgChart JS integrated into your project. You can include the OrgChart JS library in your HTML file: `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>OrgChart with Tooltip</title> <script src="https://cdn.balkan.app/orgchart.js"></script> </head> <body> <div id="tree"></div> <script src="path/to/your-script.js"></script> </body> </html>` Replace `"path/to/your-script.js"` with the actual path to your JavaScript file. Add all the bellow code in your-script.js Step 2: Creating SVG Elements Define your SVG elements and tooltip structure: let drive = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"> <path fill="#1e88e5" d="M38.59,39c-0.535,0.93-0.298,1.68-1.195,2.197C36.498,41.715,35.465,42,34.39,42H13.61 c-1.074,0-2.106-0.285-3.004-0.802C9.708,40.681,9.945,39.93,9.41,39l7.67-9h13.84L38.59,39z"/> <path fill="#fbc02d" d="M27.463,6.999c1.073-0.002,2.104-0.716,3.001-0.198c0.897,0.519,1.66,1.27,2.197,2.201l10.39,17.996 c0.537,0.93,0.807,1.967,0.808,3.002c0.001,1.037-1.267,2.073-1.806,3.001l-11.127-3.005l-6.924-11.993L27.463,6.999z"/> <path fill="#e53935" d="M43.86,30c0,1.04-0.27,2.07-0.81,3l-3.67,6.35c-0.53,0.78-1.21,1.4-1.99,1.85L30.92,30H43.86z"/> <path fill="#4caf50" d="M5.947,33.001c-0.538-0.928-1.806-1.964-1.806-3c0.001-1.036,0.27-2.073,0.808-3.004l10.39-17.996 c0.537-0.93,1.3-1.682,2.196-2.2c0.897-0.519,1.929,0.195,3.002,0.197l3.459,11.009l-6.922,11.989L5.947,33.001z"/> <path fill="#1565c0" d="M17.08,30l-6.47,11.2c-0.78-0.45-1.46-1.07-1.99-1.85L4.95,33c-0.54-0.93-0.81-1.96-0.81-3H17.08z"/> <path fill="#2e7d32" d="M30.46,6.8L24,18L17.53,6.8c0.78-0.45,1.66-0.73,2.6-0.79L27.46,6C28.54,6,29.57,6.28,30.46,6.8z"/> </svg>`; let tooltip = '<g data-t-id="{id}" transform="matrix(0.001,0,0,0.001,{x},{y})" ><path stroke="#FFCA28" fill="#fff" d="M 0,0 L -10,-10 H -85 Q -90,-10 -90,-15 V -65 Q -90,-70 -85,-70 H 85 Q 90,-70 90,-65 V -15 Q 90,-10 85,-10 H 10 L 0,0 z" ></path>{text}</g>'; let tooltipText = '<text text-anchor="middle" data-width="130" fill="#F57C00" x="0" y="-32">{val}</text>'; Step 3: Customizing the OrgChart Template Customize the OrgChart template to include the SVG `foreignObject` and tooltip: OrgChart.templates.ana.html = '<foreignobject class="node" style="font: 13px Helvetica;" x="20" y="10" width="200" height="100">' + drive + '{val}</foreignobject>'; let chart = new OrgChart(document.getElementById("tree"), { mode: 'dark', mouseScrool: OrgChart.action.none, nodeMouseClick: OrgChart.action.none, template: "ana", enableSearch: false, nodeBinding: { field_0: "name", html: "html", tooltip: 'tooltip' }, nodeMenu: { details: { text: "Details" }, edit: { text: "Edit" }, add: { text: "Add" }, remove: { text: "Remove" } } }); Step 4: Adding Event Listeners for Hover Effects Add event listeners to handle the tooltip display on `mouseenter` and `mouseleave` events: chart.on('redraw', function (sender) { let fieldElements = sender.element.querySelectorAll('[data-n-id] foreignobject svg'); for (let i = 0; i < fieldElements.length; i++) { let fieldElement = fieldElements[i]; fieldElement.addEventListener('mouseenter', function () { let id = this.parentElement.parentElement.getAttribute('data-n-id'); let tooltipElement = document.querySelector('[data-t-id="' + id + '"]'); if (!tooltipElement) return; let transformStart = OrgChart._getTransform(tooltipElement); let transformEnd = transformStart.slice(0); transformEnd[0] = 1; transformEnd[3] = 1; OrgChart.animate(tooltipElement, { transform: transformStart }, { transform: transformEnd }, 300, OrgChart.anim.outBack); }); fieldElement.addEventListener('mouseleave', function () { let id = this.parentElement.parentElement.getAttribute('data-n-id'); let tooltipElement = document.querySelector('[data-t-id="' + id + '"]'); if (!tooltipElement) return; let transformStart = OrgChart._getTransform(tooltipElement); let transformEnd = transformStart.slice(0); transformEnd[0] = 0.001; transformEnd[3] = 0.001; OrgChart.animate(tooltipElement, { transform: transformStart }, { transform: transformEnd }, 300, OrgChart.anim.inBack); }); } }); Step 5: Rendering the Tooltip Render the tooltip when the chart is drawn: `OrgChart.events.on('render', function (sender, args) { for (let i = 0; i < args.res.visibleNodeIds.length; i++) { let node = sender.getNode(args.res.visibleNodeIds[i]); let data = sender.get(node.id); if (data.tooltip) { args.content += tooltip .replace('{x}', node.x + node.w / 2) .replace('{y}', node.y + 5) .replace('{id}', node.id) .replace('{text}', tooltipText.replace('{val}', OrgChart.wrapText(data.tooltip, tooltipText))); } } });` Step 6: Loading Chart Data Finally, load the chart data and include tooltips: `chart.load([ { id: "1", html: "<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id pellentesque lacus.</div>", tooltip: '1 my fancy tooltip' }, { id: "2", pid: "1", html: "<div>Mauris aliquam magna sapien. Ut a diam ac arcu commodo maximus.</div>", tooltip: '2 my fancy tooltip' }, { id: "3", pid: "1", html: "<div>Phasellus eros felis, pellentesque quis ultrices nec, tempus ac felis.</div>", tooltip: '3 my fancy tooltip' } ]);` By following these steps, you can easily add tooltips on a `foreignObject` element hover in your OrgChart JS. Tooltip in a foreignobject - OrgChart JS Author: BALKAN App Add public comment... Vladimir Putin Family Tree Add Field Data in Expand button with OrgChart JS Bill Gates Family Tree Custom Aligning Nodes in a JavaScript Organizational Chart Center and Zoom on Search Click in OrgChart JS Create Multiline Group Titles in OrgChart JS Adding Arrows in OrgChart JS Links Show a Custom Edit Form for a node in OrgChart JS Jeff Bezos Family Tree How to Add Material Icons in OrgChart JS Leonardo DiCaprio Family Tree Visualizing Dual Reporting Structures with OrgChart JS Exporting OrgChart JS to A4 PDF: A Step-by-Step Guide Genghis Khan Family Tree: The Lineage of the Great Khan OrgChart JS now support Export to Visio New Export Option: childLevels in OrgChart JS Elon Musk Family Tree AI for OrgChart JS: Revolutionizing Organization Charts Family Tree JS 2 (Preview) d3 org chart Our Family Tree App is Now on Android! Why BALKAN OrgChart JS is the Best Organizational Chart Library How to Create a JavaScript Flow Chart How to Add an Organizational Chart to a Mobile Application How to Create a JavaScript Organizational Chart OrgChart JS Now Supports PDF Export Per Team Introducing Family Tree App Donald Trump Family Tree Discover Your Roots: Build Your Family Tree with BALKAN App JavaScript Organization Chart Instantly create interactive, intuitive flowcharts in seconds JavaScript Hierarchy Chart Mermaid js alternative Create Flowcharts in Seconds with Flow Chart JS: Your New Favorite JavaScript Library Customizing Filter UI - Code of The Week Zoom Slider - Code of The Week Bookmarks - Code of The Week Customizing Search Results - Code of The Week Introducing Undo Redo - Code Of The Week Price adjustment announcement The price will increase for new customers Buttons for adding family members to a family tree - Code of The Week Levels - Code of The Week Change node color from a button in the Edit Form - Code of The Week Filter and Highlight Nodes - Code of The Week Up Expanding - Code Of The Week Programmatically move the chart - Code of The Week Siblings in Family Tree JS - Code of The Week Purple template - Code of The Week Assistant With Children - Code of The Week Conditional Layout - Code of The Week Conditional Color - Code of the Week Sriniz Family Tree Template - Code of The Week Color Picker - Code of The Week Add company logo as watermark in exported PDF documents - Code of The Week Mind map - Code of The Week Create relationship with circle menu - Code of The Week Animated Photos - Code of the Week Grouped Dotted Lines - Code Of The Week Dotted Lines - Code Of The Week Department Dynamic Title - Code Of The Week Add expand button for partners - Code of the Week Change the sub levels with Drag and Drop - Code of The Week Custom Edit From using Popover - Code of the Week Sub levels tag option - Code of the Week Highlights search results directly on Org Chart nodes - Code of the Week Code of the Week/Relationship maps and Business process diagrams Search using field name abbreviations - Code of the Week Dynamic Template - Code of the Week Read and Write local CSV file using File API and Org Chart JS - Code of The Week Organizational Chart Path Highlighting and Selection Modern Template - Org Chart JS Performance - Org Chart JS Single parent is supported in Family Tree JS How To Develop a Flowchart Maker with Org Chart JS How to upload a photo to Family Tree JS in .NET core How to change the color of selected node - Family Tree JS Family Tree with live tiles

Create a Tooltip for a ForeignObject Element Hover in OrgChart JS

Create a Tooltip for a ForeignObject Element Hover in OrgChart JS

Step 1: Setting Up Your Environment

Step 2: Creating SVG Elements

Step 3: Customizing the OrgChart Template

Step 4: Adding Event Listeners for Hover Effects

Step 5: Rendering the Tooltip

Step 6: Loading Chart Data

Vladimir Putin Family Tree

Add Field Data in Expand button with OrgChart JS

Bill Gates Family Tree

Custom Aligning Nodes in a JavaScript Organizational Chart

Center and Zoom on Search Click in OrgChart JS

Create Multiline Group Titles in OrgChart JS

Adding Arrows in OrgChart JS Links

Show a Custom Edit Form for a node in OrgChart JS

Jeff Bezos Family Tree

How to Add Material Icons in OrgChart JS

Leonardo DiCaprio Family Tree

Visualizing Dual Reporting Structures with OrgChart JS

Exporting OrgChart JS to A4 PDF: A Step-by-Step Guide

Genghis Khan Family Tree: The Lineage of the Great Khan

OrgChart JS now support Export to Visio

New Export Option: childLevels in OrgChart JS

Elon Musk Family Tree

AI for OrgChart JS: Revolutionizing Organization Charts

Family Tree JS 2 (Preview)

d3 org chart

Our Family Tree App is Now on Android!

Why BALKAN OrgChart JS is the Best Organizational Chart Library

How to Create a JavaScript Flow Chart

How to Add an Organizational Chart to a Mobile Application

How to Create a JavaScript Organizational Chart

OrgChart JS Now Supports PDF Export Per Team

Introducing Family Tree App

Donald Trump Family Tree

Discover Your Roots: Build Your Family Tree with BALKAN App

JavaScript Organization Chart

Instantly create interactive, intuitive flowcharts in seconds

JavaScript Hierarchy Chart

Mermaid js alternative

Create Flowcharts in Seconds with Flow Chart JS: Your New Favorite JavaScript Library

Customizing Filter UI - Code of The Week

Zoom Slider - Code of The Week

Bookmarks - Code of The Week

Customizing Search Results - Code of The Week

Introducing Undo Redo - Code Of The Week

Price adjustment announcement

The price will increase for new customers

Buttons for adding family members to a family tree - Code of The Week

Levels - Code of The Week

Change node color from a button in the Edit Form - Code of The Week

Filter and Highlight Nodes - Code of The Week

Up Expanding - Code Of The Week

Programmatically move the chart - Code of The Week

Siblings in Family Tree JS - Code of The Week

Purple template - Code of The Week

Assistant With Children - Code of The Week

Conditional Layout - Code of The Week

Conditional Color - Code of the Week

Sriniz Family Tree Template - Code of The Week

Color Picker - Code of The Week

Add company logo as watermark in exported PDF documents - Code of The Week

Mind map - Code of The Week

Create relationship with circle menu - Code of The Week

Animated Photos - Code of the Week

Grouped Dotted Lines - Code Of The Week

Dotted Lines - Code Of The Week

Department Dynamic Title - Code Of The Week

Add expand button for partners - Code of the Week

Change the sub levels with Drag and Drop - Code of The Week

Custom Edit From using Popover - Code of the Week

Sub levels tag option - Code of the Week

Highlights search results directly on Org Chart nodes - Code of the Week

Code of the Week/Relationship maps and Business process diagrams

Search using field name abbreviations - Code of the Week

Dynamic Template - Code of the Week

Read and Write local CSV file using File API and Org Chart JS - Code of The Week

Organizational Chart Path Highlighting and Selection

Modern Template - Org Chart JS