You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP

@visx/tooltip

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@visx/tooltip

visx tooltip

3.12.0
latest
Version published
Maintainers
4
Created

What is @visx/tooltip?

@visx/tooltip is a part of the VisX library, which provides a collection of reusable low-level visualization components for React. The @visx/tooltip package specifically helps in creating and managing tooltips in visualizations, making it easier to display additional information when users hover over or interact with elements in a chart or graph.

What are @visx/tooltip's main functionalities?

Basic Tooltip

This code demonstrates how to create a basic tooltip that appears when the user hovers over an SVG element. The tooltip displays the text 'Tooltip Content' and follows the mouse cursor.

import React from 'react';
import { TooltipWithBounds, useTooltip, defaultStyles } from '@visx/tooltip';

const TooltipExample = () => {
  const { tooltipData, tooltipLeft, tooltipTop, showTooltip, hideTooltip } = useTooltip();

  return (
    <div>
      <svg
        width={500}
        height={500}
        onMouseMove={(event) => {
          const { clientX, clientY } = event;
          showTooltip({
            tooltipData: 'Tooltip Content',
            tooltipLeft: clientX,
            tooltipTop: clientY,
          });
        }}
        onMouseLeave={hideTooltip}
      >
        <circle cx={250} cy={250} r={50} fill="blue" />
      </svg>
      {tooltipData && (
        <TooltipWithBounds
          top={tooltipTop}
          left={tooltipLeft}
          style={defaultStyles}
        >
          {tooltipData}
        </TooltipWithBounds>
      )}
    </div>
  );
};

export default TooltipExample;

Custom Styled Tooltip

This example shows how to apply custom styles to a tooltip. The tooltip appears when the user hovers over a rectangle and displays the text 'Custom Styled Tooltip' with a black background and white text.

import React from 'react';
import { TooltipWithBounds, useTooltip } from '@visx/tooltip';

const customStyles = {
  backgroundColor: 'black',
  color: 'white',
  padding: '5px',
  borderRadius: '4px',
};

const CustomTooltipExample = () => {
  const { tooltipData, tooltipLeft, tooltipTop, showTooltip, hideTooltip } = useTooltip();

  return (
    <div>
      <svg
        width={500}
        height={500}
        onMouseMove={(event) => {
          const { clientX, clientY } = event;
          showTooltip({
            tooltipData: 'Custom Styled Tooltip',
            tooltipLeft: clientX,
            tooltipTop: clientY,
          });
        }}
        onMouseLeave={hideTooltip}
      >
        <rect x={200} y={200} width={100} height={100} fill="green" />
      </svg>
      {tooltipData && (
        <TooltipWithBounds
          top={tooltipTop}
          left={tooltipLeft}
          style={customStyles}
        >
          {tooltipData}
        </TooltipWithBounds>
      )}
    </div>
  );
};

export default CustomTooltipExample;

Tooltip with Dynamic Content

This example demonstrates a tooltip with dynamic content. The tooltip displays the current mouse coordinates (X and Y) when the user hovers over a line element.

import React from 'react';
import { TooltipWithBounds, useTooltip } from '@visx/tooltip';

const DynamicTooltipExample = () => {
  const { tooltipData, tooltipLeft, tooltipTop, showTooltip, hideTooltip } = useTooltip();

  return (
    <div>
      <svg
        width={500}
        height={500}
        onMouseMove={(event) => {
          const { clientX, clientY } = event;
          showTooltip({
            tooltipData: `X: ${clientX}, Y: ${clientY}`,
            tooltipLeft: clientX,
            tooltipTop: clientY,
          });
        }}
        onMouseLeave={hideTooltip}
      >
        <line x1={0} y1={0} x2={500} y2={500} stroke="red" strokeWidth={2} />
      </svg>
      {tooltipData && (
        <TooltipWithBounds
          top={tooltipTop}
          left={tooltipLeft}
        >
          {tooltipData}
        </TooltipWithBounds>
      )}
    </div>
  );
};

export default DynamicTooltipExample;

Other packages similar to @visx/tooltip

FAQs

Package last updated on 07 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts