https://github.com/mhdfahz/react-tooltip

A tooltip component that can be positioned relative to its parent element.
https://github.com/mhdfahz/react-tooltip

pure-react react react-tooltip reactjs tooltip

Last synced: 2 months ago
JSON representation

A tooltip component that can be positioned relative to its parent element.

• Host: GitHub
• URL: https://github.com/mhdfahz/react-tooltip
• Owner: MHDFahz
• License: mit
• Created: 2023-01-30T08:02:09.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-30T11:18:43.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T04:22:53.031Z (9 months ago)
• Topics: pure-react, react, react-tooltip, reactjs, tooltip
• Language: JavaScript
• Homepage:
• Size: 361 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ToolTip-React Component

A tooltip component that can be positioned relative to its parent element.

## Author

[![Author](https://img.shields.io/badge/Author-Fahis-blue)]([email protected])

## Version

[![Version](https://img.shields.io/badge/version-1.0.0-blue)](https://www.agilsium.com/)

## Usage

To use the ToolTip component, import it into your React component and render it inside the JSX. The following props can be passed to the component:

## Props

- `position`: The position of the tooltip relative to its parent element. Can be set to "right", "left", "above", "below" or "auto.

- `show`: A flag indicating whether the tooltip should be visible by default.

- `trigger`: The event that triggers the tooltip to show. Can be set to "hover", "click" or "touch".

- `content`: The content of the tooltip. It can be a string of text, an image, or a list.

- `delay`: The delay in milliseconds before the tooltip is shown or hidden.

- `style`: The style for the tooltip element.

- `forceCenter`: A flag indicating whether the tooltip should be centered even if it would otherwise be obscured.

- `autoClose` - A flag indicating whether the tooltip should automatically close after a certain amount of time or not.

Here is an example of how the ToolTip component can be used:

```jsx

import ToolTip from "./ToolTip";

function MyComponent() {

  return (

    


      Hover over me!

      

        
Hi hover

      

    

  );

}

```


### Ref Features

You can also use the reference that the forwardRef function created to show and hide the tooltip using showDynamicToolTip, killDynamicToolTip and getNode functions.

```jsx

const ref = useRef(null);

function MyComponent() {

  return (

    


      

        Hover over me!

      

       ref.current.showDynamicToolTip()}>

        Show Tooltip

      

       ref.current.killDynamicToolTip()}>

        Hide Tooltip

      

    

  );

}

```


#### Note that the component uses dynamic positioning feature to place the tooltip at the best possible position by analyzing the available space in the window and the position of the parent element.