@bytesberry/tooltip

A simple and customizable React tooltip component that provides an easy way to display informative hover messages.

Installation

Install the package using Yarn:

yarn add @bytesberry/tooltip

Install the package using NPM:

npm install @bytesberry/tooltip

Shapshots

Usage

You can easily integrate the ToolTip component into your React application:

import {ToolTip} from "@bytesberry/tooltip";

<ToolTip
  hoverMessage="This is a helpful tip!"
  text="Hover me for details"
/>

// or

<ToolTip
  hoverMessage="This is a helpful tip!"
  text="Hover me for details"
  position="top"
  tooltipColor="orange"
  hoverMessageColor="#fff"
  backgroundColor="green"
  arrowColor="green"
  arrowVisibility={false}
/>

API Reference

Props

• hoverMessage
  Type: string
  Default: "Your hover message."
  Description: Defines the message to display when the user hovers over the text.
  Example:

  <ToolTip hoverMessage="This is a helpful tip!" />

• text
  Type: string
  Default: "This is hover text"
  Description: The text displayed on the element that the user will hover over.
  Example:

  <ToolTip text="Hover me!" />

• position
  Type: string
  Default: "top"
  Description: Specifies the position of the tooltip relative to the element. Possible values: "top", "bottom", "left", "right".
  Example:

  <ToolTip position="bottom" />

• tooltipColor
  Type: string
  Default: "#209647"
  Description: The color of the tooltip text.
  Example:

  <ToolTip tooltipColor="red" />

• hoverMessageColor
  Type: string
  Default: "white"
  Description: The text color of the hover message.
  Example:

  <ToolTip hoverMessageColor="yellow" />

• backgroundColor
  Type: string
  Default: "#209647"
  Description: The background color of the tooltip.
  Example:

  <ToolTip backgroundColor="black" />

• arrowVisibility
  Type: boolean
  Default: true
  Description: Visibility of the arrow. Set false to hide arrow. Example:

  <ToolTip arrowVisibility={false} />

Features

• Lightweight and easy to use.
• Customizable colors, positions, and messages for complete control.
• Ideal for enhancing UI elements with additional context on hover.
• Supports top, bottom, left, and right positioning for versatile usage.

Elevate your web app's user interface with the power of @bytesberry/tooltip.