Tooltips

Tooltips

Interaction

Add more context to items using simple JSX tooltips.

View live example →

Move the mouse cursor over nodes

The onPointerMove event is triggered when moving the mouse.

This story creates a simple JSX tooltip to show additional data.

You can see the story's styling in the CSS tab or modify the CSS in the playground.

import React, { useState } from "react";
import { createRoot } from "react-dom/client";

import { Chart } from "regraph";

import data from "./data";

export const Demo = () => <TooltipDemo items={data()} />;

function Tooltip(props) {
  const { message, x, y } = props;
  return (
    <div className="tooltip" style={{ left: x, top: y }}>
      <div className="tooltip-arrow" />
      <div className="tooltip-content">{message}</div>
    </div>
  );
}

function TooltipDemo(props) {
  const [state, setState] = useState({
    message: null,
    position: { x: 0, y: 0 },
  });
  const { items } = props;

  const updateTooltip = ({ id, x, y }) => {
    const item = items[id];
    if (item && item.data && item.data.fullName) {
      setState({
        message: item.data.fullName,
        position: { x, y },
      });
    } else {
      setState({
        message: null,
        position: { x: 0, y: 0 },
      });
    }
  };

  return (
    <div style={{ height: "100%", overflow: "hidden", position: "relative", width: "100%" }}>
      <Chart
        items={items}
        options={{ dragPan: false, hoverDelay: 0, navigation: false, overview: false }}
        onPointerMove={updateTooltip}
      />
      {state.message && (
        <Tooltip x={state.position.x} y={state.position.y} message={state.message} />
      )}
    </div>
  );
}

const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);

Data

import { style } from "@ci/theme/rg/js/storyStyles";

function data() {
  return {
    n1: {
      label: { ...style.primaryLabel1, text: "Tom" },
      data: { fullName: "Tom Thompson" },
      ...style.primary1,
    },
    n2: {
      label: { ...style.primaryLabel1, text: "Wendy" },
      data: { fullName: "Wendy White" },
      ...style.primary1,
    },
    n3: {
      label: { ...style.primaryLabel1, text: "Bobby" },
      data: { fullName: "Bobby Brown" },
      ...style.primary1,
    },
    n4: {
      label: { ...style.primaryLabel1, text: "Sally" },
      data: { fullName: "Sally Simpson" },
      ...style.primary1,
    },
    "n1-n2": { id1: "n1", id2: "n2", ...style.link },
    "n2-n3": { id1: "n2", id2: "n3", ...style.link },
    "n3-n4": { id1: "n3", id2: "n4", ...style.link },
    "n4-n5": { id1: "n4", id2: "n5", ...style.link },
  };
}

export default data;

HTML

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="regraph" style="height: 100vh"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>

CSS

.tooltip {
  position: absolute;
  display: flex;
  align-items: center;
  margin-top: -18px;
  margin-left: 22px;

  width: 100px;
  padding: 6px 8px;
  background-color: #333;
  color: white;

  font-family: sans-serif;
  font-size: 14px;
  text-align: center;

  border-radius: 1.5px 3px 3px 1.5px;
  -webkit-box-shadow: -2px 2px 6px 0px rgba(94, 94, 94, 1);
  -moz-box-shadow: -2px 2px 6px 0px rgba(94, 94, 94, 1);
  box-shadow: -2px 2px 6px 0px rgba(94, 94, 94, 1);

  pointer-events: none;
}

.tooltip-arrow {
  position: absolute;
  left: -11px;
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  background-color: #333;
  z-index: 0;

  -webkit-box-shadow: -1px 4px 6px -2px rgba(94, 94, 94, 1);
  -moz-box-shadow: -1px 4px 6px -2px rgba(94, 94, 94, 1);
  box-shadow: -1px 4px 6px -2px rgba(94, 94, 94, 1);
}

.tooltip-content {
  position: relative;
  background-color: #333;
  z-index: 1;
  height: 20px;
  display: flex;
  align-items: center;
}

Search

See also

Terms of use