intro/tooltips.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>


<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->


<meta itemprop="name" content="Tooltips" />
<meta property="og:title" content="Tooltips" />
<meta name="twitter:title" content="Tooltips" />


<meta property="og:image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />

<meta property="og:url" content="https://gojs.net/latest/intro/tooltips.html" />
<meta property="twitter:url" content="https://gojs.net/latest/intro/tooltips.html" />

<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />

    <title>
      Tooltips | GoJS
    </title>
    <link rel="stylesheet" href="../assets/css/prism.css"/>
  </head>
  <script>
    window.diagrams = [];
    window.goCode = function (pre, w, h, parentid, animation) {
      window
        .diagrams
        .push([pre, w, h, parentid, animation]);
    }
  </script>
  <body>
    <nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
  <div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
    <a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
       href="../">
      GoJS
    </a>
    <div class="relative">
      <button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
        <svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <div id="topnavList" class="hidden md:block">
        <div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
                    md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
          <a href="../learn/">Learn</a>
          <a href="../samples/">Samples</a>
          <a href="../intro/">Intro</a>
          <a href="../api/">API</a>
          <a href="../download.html">Download</a>
          <a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
          <a id="tc" href="https://nwoods.com/contact.html"
            target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
          <a id="tb" href="https://nwoods.com/sales/index.html"
            target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
        </div>
      </div>
    </div>
  </div>
</nav>
<script>
  window.addEventListener("DOMContentLoaded", function () {
    // topnav
    var topButton = document.getElementById("topnavButton");
    var topnavList = document.getElementById("topnavList");
    if (topButton && topnavList) {
      topButton.addEventListener("click", function (e) {
        topnavList
          .classList
          .toggle("hidden");
        e.stopPropagation();
      });
      document.addEventListener("click", function (e) {
        // if the clicked element isn't the list, close the list
        if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
          topButton.click();
        }
      });

      // set active <a> element
      var url = window
        .location
        .href
        .toLowerCase();
      var aTags = topnavList.getElementsByTagName('a');
      for (var i = 0; i < aTags.length; i++) {
        var lowerhref = aTags[i]
          .href
          .toLowerCase();
        if (url.startsWith(lowerhref)) {
          aTags[i]
            .classList
            .add('active');
          break;
        }
      }
    }
  });
</script>
    <div class="sticky top-0 left-0 z-10 px-2 w-full bg-white border-b border-b-gray-200 md:hidden">
  <button id="sidenavButton" class="flex p-2 text-gray-900 bg-inherit shadow-none items-center text-sm font-semibold hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
    <svg class="h-7 w-7 block mr-2" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
      <path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <span>Menu</span>
  </button>
</div>
<script>
  window.addEventListener("DOMContentLoaded", function () {
    // sidenav
    var sideButton = document.getElementById("sidenavButton");
    var sidenav = document.getElementById("sidenav");
    if (sideButton && sidenav) {
      sideButton.addEventListener("click", function (e) {
        sidenav
          .classList
          .toggle("hidden");
        e.stopPropagation();
      });
      document.addEventListener("click", function (e) {
        // if the clicked element isn't the list, close the list
        if (!sidenav.classList.contains("hidden") && !e.target.closest("#sidenavList")) {
          sideButton.click();
        }
      });
    }
  });
</script>
    
    <div class="flex flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
      
      <aside id="sidenav"
  class="hidden fixed top-0 left-0 z-10 w-full bg-black/10 min-h-screen max-h-screen overflow-x-hidden overflow-y-auto flex-shrink-0
         md:block md:sticky md:w-52 md:min-h-0 md:bg-inherit md:border-r md:border-r-gray-200 md:overscroll-auto">
  <nav id="sidenavList" class="flex flex-col bg-white w-52 min-h-screen pl-2 pt-4 pb-24 md:w-full md:min-h-0">
    
  <a href="index.html">Basics</a>
  <a href="buildingObjects.html">Building Parts</a>
  <a href="usingModels.html">Using Models</a>
  <a href="dataBinding.html">Data Binding</a>
  <a href="react.html">GoJS with React</a>
  <a href="svelte.html">GoJS with Svelte</a>
  <a href="angular.html">GoJS with Angular</a>
  <a href="textBlocks.html">TextBlocks</a>
  <a href="shapes.html">Shapes</a>
  <a href="pictures.html">Pictures</a>
  <a href="panels.html">Panels</a>
  <a href="tablePanels.html">Table Panels</a>
  <a href="brush.html">Brushes</a>
  <a href="sizing.html">Sizing Objects</a>
  <a href="itemArrays.html">Item Arrays</a>
  <a href="changedEvents.html">Changed Events</a>
  <a href="transactions.html">Transactions</a>
  <a href="viewport.html">Coordinates</a>
  <a href="initialView.html">Initial View</a>
  <a href="collections.html">Collections</a>
  <a href="links.html">Links</a>
  <a href="linkLabels.html">Link Labels</a>
  <a href="connectionPoints.html">Link Points</a>
  <a href="ports.html">Ports</a>
  <a href="nodes.html">Nodes</a>
  <a href="typings.html">Typings</a>
  <a href="debugging.html">Debugging</a>
  <a href="layouts.html">Layouts</a>
  <a href="trees.html">Trees</a>
  <a href="subtrees.html">SubTrees</a>
  <a href="groups.html">Groups</a>
  <a href="subgraphs.html">SubGraphs</a>
  <a href="sizedGroups.html">Sized Groups</a>
  <a href="selection.html">Selection</a>
  <a href="highlighting.html">Highlighting</a>
  <a href="theming.html">Theming</a>
  <a href="routers.html">Routers</a>
  <a href="animation.html">Animation</a>
  <a href="toolTips.html">ToolTips</a>
  <a href="contextmenus.html">Context Menus</a>
  <a href="events.html">Diagram Events</a>
  <a href="tools.html">Tools</a>
  <a href="commands.html">Commands</a>
  <a href="permissions.html">Permissions</a>
  <a href="validation.html">Validation</a>
  <a href="HTMLInteraction.html">HTML Interaction</a>
  <a href="layers.html">Layers &amp; Z-ordering</a>
  <a href="palette.html">Palette</a>
  <a href="overview.html">Overview</a>
  <a href="replacingDeleting.html">Replacing and Deleting</a>
  <a href="buttons.html">Buttons</a>
  <a href="templateMaps.html">Template Maps</a>
  <a href="legends.html">Legends and Titles</a>
  <a href="extensions.html">Extensions</a>
  <a href="geometry.html">Geometry Strings</a>
  <a href="grids.html">Grid Patterns</a>
  <a href="graduatedPanels.html">Graduated Panels</a>
  <a href="SVGcontext.html">Rendering to SVG</a>
  <a href="makingSVG.html">Snapshot to SVG</a>
  <a href="makingImages.html">Diagram Images</a>
  <a href="printing.html">Printing</a>
  <a href="serverSideImages.html">Server-side Images</a>
  <a href="nodeScript.html">GoJS in Node.js</a>
  <a href="testing.html">Testing</a>
  <a href="performance.html">Performance</a>
  <a href="platforms.html">Platforms</a>
  <a href="deployment.html">Deployment</a>

  </nav>
</aside>
<script>
  var navList = document.getElementById('sidenavList');
  if (navList !== null) {
    var url = window.location.href;
    var lindex = url.lastIndexOf('/');
    url = url
      .slice(lindex + 1)
      .toLowerCase();
    var aTags = navList.getElementsByTagName('a');
    var currentindex = -1;
    for (var i = 0; i < aTags.length; i++) {
      var lowerhref = aTags[i]
        .href
        .toLowerCase();
      if (lowerhref.indexOf('/' + url) !== -1) {
        currentindex = i;
        aTags[i]
          .classList
          .add('active');
        break;
      }
    }
  }
</script>
      
      <div class="px-4 pb-16 w-full overflow-hidden prose">
        
<h1>ToolTips</h1>
<p><b>GoJS</b> provides a way to create customized tooltips for any object or for the diagram background.</p>
<p>
  A tooltip is an <a>Adornment</a> that is shown when the mouse hovers over an object that has its <a>GraphObject.toolTip</a> set. The tooltip part is bound to
  the same data as the part itself.
</p>
<p>See samples that make use of tooltips in the <a href="../samples/index.html#tooltips">samples index</a>.</p>
<p>
  It is typical to implement a tooltip as a "ToolTip" Panel holding a <a>TextBlock</a> or a Panel of TextBlocks and other objects. Each "ToolTip" is just an
  "Auto" Panel <a>Adornment</a> that is shadowed, and where the border is a rectangular <a>Shape</a> with a light gray fill. However you can implement the
  tooltip as any arbitrarily complicated Adornment.
</p>
<p>
  You can see how the "ToolTip" builder is defined at
  <a href="../extensions/Buttons.js">Buttons.js</a>. You may also wish to theme the "ToolTip", as described on the
  <a href="./theming.html#BuilderObjects">theming intro page</a>.
</p>
<p>
  In this example each <a>Node</a> has its <a>GraphObject.toolTip</a> property set to a Part that shows the data.color property via a normal data binding. The
  diagram gets its own tooltip by setting <a>Diagram.toolTip</a>.
</p>
<pre class="lang-js" id="tooltips"><code>
  diagram.nodeTemplate =
    new go.Node("Auto", {
        toolTip:  // define a tooltip for each node that displays the color as text
          go.GraphObject.build("ToolTip")
            .add(
              new go.TextBlock({ margin: 4 })
                .bind("text", "color")
            )  // end of Adornment
      })
      .add(
        new go.Shape("RoundedRectangle", { fill: "white" })
          .bind("fill", "color"),
        new go.TextBlock({ margin: 5 })
          .bind("text")
      );

  // a function that produces the content of the diagram tooltip
  function diagramInfo(model) {
    return "Model:\n" + model.nodeDataArray.length + " nodes, " +
                        model.linkDataArray.length + " links";
  }

  // provide a tooltip for the background of the Diagram, when not over any Part
  diagram.toolTip =
    go.GraphObject.build("ToolTip")
      .add(
        new go.TextBlock({ margin: 4 })
          // use a converter to display information about the diagram model
          .bind("text", "", diagramInfo)
      );

  const nodeDataArray = [
    { key: 1, text: "Alpha", color: "lightblue" },
    { key: 2, text: "Beta", color: "pink" }
  ];
  const linkDataArray = [
    { from: 1, to: 2 }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
</code></pre>
<script>
  goCode('tooltips', 250, 150);
</script>
<p>
  Try pausing the mouse over each of the nodes or in the background of the diagram. If you copy some parts, you will see that the tooltip for the diagram
  displays newer information about the diagram.
</p>
<p>
  You can change how long for the mouse has to wait motionless before a tooltip appears by setting <a>ToolManager.hoverDelay</a>. For example, when initializing
  a <a>Diagram</a>, <code>"toolManager.hoverDelay": 600</code> changes the delay to be 6/10ths of one second.
</p>
<p>
  You can change how long the tooltip remains visible by setting <a>ToolManager.toolTipDuration</a>. For example,
  <code>"toolManager.toolTipDuration": 10000</code> changes the visible time to 10 seconds.
</p>

<h3 id="Positioning">Positioning</h3>
<p>
  There are two ways to customize the positioning of the tooltip relative to the adorned GraphObject. One way is to override <a>ToolManager.positionToolTip</a>.
  Another way is to have the tooltip <a>Adornment</a> include a <a>Placeholder</a>. The Placeholder is positioned to have the same size and position as the
  adorned object. When creating tooltips with Placeholders, don't use the predefined "ToolTip" builder as it will introduce an extra shape typically used as the
  border for the "Auto" Panel.
</p>
<pre class="lang-js" id="tooltipsplaceholder"><code>
  // this is a normal Node template that also has a toolTip defined for it
  diagram.nodeTemplate =
    new go.Node("Auto", {
        toolTip:                       // define a tooltip for each node
          new go.Adornment("Spot",      // that has several labels around it
              { background: "transparent" })  // avoid hiding tooltip when mouse moves
            .add(
              new go.Placeholder({ padding: 5 }),  // placeholder will be a bit bigger than node
              new go.TextBlock(
                { alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom, stroke: "red" })
                .bind("text", "key", s => "key: " + s),
              new go.TextBlock("Bottom",
                { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top, stroke: "red" })
                .bind("text", "color", s => "color: " + s)
            )  // end Adornment
      })
      .add(
        new go.Shape("RoundedRectangle", { fill: "white" })
          .bind("fill", "color"),
        new go.TextBlock({ margin: 5 })
          .bind("text")
      );

  const nodeDataArray = [
    { key: 1, text: "Alpha", color: "lightyellow" },
    { key: 2, text: "Beta", color: "orange" }
  ];
  const linkDataArray = [
    { from: 1, to: 2 }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
</code></pre>
<script>
  goCode('tooltipsplaceholder', 350, 200);
</script>
<p>
  Note how the <a>Adornment</a> implementing the tooltip uses a "transparent" background so that the tooltip is not automatically removed when the mouse moves.
</p>

<h2 id="HTMLTooltips">HTML Tooltips</h2>
<p>
  It is possible to define custom tooltips using HTML instead of <a>Adornment</a>s using the <a>HTMLInfo</a> class. The
  <a href="../samples/dataVisualization.html">Data Visualization sample</a> shows such tooltips. See <a href="HTMLInteraction.html">HTML Interaction</a> for
  more discussion.
</p>
<p>
  HTML tooltips require more effort to implement than using the default <b>GoJS</b> "ToolTip" and GraphObjects. However you would have the full power of
  HTML/CSS/JavaScript to show whatever you want.
</p>

      </div>
    </div>
    <footer class="bg-white text-gray-900 border-t border-t-gray-200">
  <div class="w-full max-w-screen-lg mx-auto px-4 py-6">
    
    <p id="version" class="text-xs text-gray-900 m-0"></p>
    <div class="text-sm px-0 mb-4 grid grid-cols-2 sm:grid-cols-3 gap-y-10">
      <div>
        <h2 class="text-base font-semibold text-nwoods-primary">GoJS</h2>
        <ul class="list-none space-y-4 md:space-y-1 px-0">
          <li>
            <a href="../samples/index.html">Samples</a>
          </li>
          <li>
            <a href="../learn/index.html">Learn</a>
          </li>
          <li>
            <a href="../intro/index.html">Intro</a>
          </li>
          <li>
            <a href="../api/index.html">API</a>
          </li>
          <li>
            <a href="../changelog.html">Changelog</a>
          </li>
          <li>
            <a href="https://github.com/NorthwoodsSoftware/GoJS" target="_blank" rel="noopener">GitHub</a>
          </li>
        </ul>
      </div>
      <div>
        <h2 class="text-base font-semibold text-nwoods-primary">Support</h2>
        <ul class="list-none space-y-4 md:space-y-1 px-0">
          <li>
            <a href="https://nwoods.com/contact.html"
              target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
          </li>
          <li>
            <a href="https://forum.nwoods.com/c/gojs" target="_blank" rel="noopener">Forum</a>
          </li>
          <li>
            <a href="https://nwoods.com/app/activate.aspx?sku=gojs" target="_blank" rel="noopener">Activate</a>
          </li>
          <li>
            <a href="https://nwoods.com/sales/index.html"
              target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
          </li>
          
        </ul>
      </div>
      <div>
        <h2 class="text-base font-semibold text-nwoods-primary">Company</h2>
        <ul class="list-none space-y-4 md:space-y-1 px-0">
          <li>
            <a target="_blank" href="https://nwoods.com" target="_blank" rel="noopener">Northwoods</a>
          </li>
          <li>
            <a target="_blank" href="https://nwoods.com/about.html" target="_blank" rel="noopener">About Us</a>
          </li>
          <li>
            <a target="_blank" href="https://nwoods.com/contact.html" target="_blank" rel="noopener">Contact Us</a>
          </li>
          <li>
            <a target="_blank" href="https://nwoods.com/consulting.html" target="_blank" rel="noopener">Consulting</a>
          </li>
          <li>
            <a target="_blank" href="https://twitter.com/northwoodsgo" target="_blank" rel="noopener">Twitter</a>
          </li>
        </ul>
      </div>
    </div>
    <p class="text-sm text-gray-900 md:mb-6">
      Copyright 1998-2025 <a href="https://nwoods.com">Northwoods Software</a>
    </p>
  </div>
</footer>
  </body>
  
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script>

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-S5QK8VSK84');
  var getOutboundLink = function (url, label) {
    gtag('event', 'click', {
      'event_category': 'outbound',
      'event_label': label,
      'transport_type': 'beacon'
    });
  }
  const params = new URL(document.location).searchParams
  let a = params.get('a');
  if (a) localStorage.setItem('a', a);
  a = localStorage.getItem('a');
  if (a) {
    const links = [...document.body.getElementsByTagName("a")].filter((l) => l.href.includes('nwoods.com'));
    for (const l of links) {
      const url = new URL(l.href);
      url.searchParams.set('a', a);
      l.href = url;
    }
  }

</script>
  <script src="../assets/js/prism.js"></script>
  <script src="../release/go.js"></script>
  
  <script src="../assets/js/goDoc.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      if (window.go)
        document
          .getElementById('version')
          .textContent = "GoJS version " + go.version;
      if (window.goDoc)
        window.goDoc();
      var d = window.diagrams;
      for (var i = 0; i < d.length; i++) {
        var dargs = d[i];
        goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
      }
      if (window.extra)
        window.extra();
      }
    );
  </script>
</html>