Spruha-tooltip NPM

spruha-tooltip

An easy way to use tooltips in React.JS.

Positioning the tooltip is made super easy. You should pick one of the positions from a range of 1 to 8 and pass it in the 'position' prop.

Other props are common CSS styles to decorate your tooltip the way you want.

Tooltip Positions:

1	2	3
8	Content	4
7	6	5

Example usage is below.

Note: Compatible only with React 18.0 and above.

Usage/Examples

import Tooltip from 'spruha-tooltip'

function App() {
  return (
      <Tooltip
      position={1}              //Positions range from 1 - 8
      background={'#1F1F1F'}    //Default --> Black Background
      color={'red'}             //Default --> White Font Color
      padding={'1rem'}          //Default --> 0.5rem
      hover={true}              //Default --> false
      click={false}             //Default --> false
      duration={3000}           //Default --> tooltip appears for 5000ms on click (milliseconds)
      textAlign={'center'}      //Default --> 'left'
      borderRadius={'5px'}      //Default --> 2px I think
      fontWeight={'bold'}       //Default --> 'normal'
      >

        {Your HTML Content Goes Here}

      </Tooltip>
    )
}