Skip to content
  1. Examples

Hover

This example shows how to use the mouseover and mouseout event to display information about the element the mouse is hovering over.

ts
import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container'
});

const info = document.getElementById('info') as HTMLDivElement;

ogma.events
  .on('mouseover', evt => {
    if (evt.target) {
      const { target, x, y } = evt;
      info.innerHTML = `Hovered ${
        target.isNode ? 'node' : 'edge'
      } ${target.getId()} at position (${x}, ${y})`;
    }
  })
  .on('mouseout', evt => {
    if (evt.target) {
      const { target, x, y } = evt;
      info.innerHTML = `Unhovered ${
        target.isNode ? 'node' : 'edge'
      } ${target.getId()} at position (${x}, ${y})`;
    }
  });

ogma.styles.addNodeRule({
  text: {
    content: n => 'Node ' + n.getId()
  }
});

ogma.styles.addEdgeRule({
  text: {
    content: e => 'Edge ' + e.getId()
  }
});

ogma.generate
  .random({ nodes: 5, edges: 10 })
  .then(ogma.setGraph)
  .then(() => ogma.view.locateGraph());
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <div id="info">Hover some nodes or edges</div>
    <script type="module" src="index.ts"></script>
  </body>
</html>
css
#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}

#info {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 1em;
  color: rgba(255, 255, 255, 1);
  background: rgba(0, 90, 200, 1);
  border-radius: 5px;
  min-width: 20%;
  font-family: Georgia, 'Times New Roman', Times, serif;
  pointer-events: none;
}