Socket
Socket
Sign inDemoInstall

react-super-tooltip

Package Overview
Dependencies
3
Maintainers
2
Versions
16
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-super-tooltip

[![Version](http://img.shields.io/npm/v/react-super-tooltip.svg)](https://www.npmjs.org/package/react-super-tooltip)


Version published
Weekly downloads
2
Maintainers
2
Install size
6.10 MB
Created
Weekly downloads
 

Readme

Source

react-super-tooltip

Version

EXAMPLE

TODO

Spott.ai - interactive videos and images

WHY ANOTHER TOOLTIP LIBRARY ?!

react-super-tooltip is made to be super simple to use, but still be very smart out of the box with default configuration. It can automatically position itself to be in the viewport by calculating the best position relative to your element (top, right, bottom, left or any 4 corners), and even when it finds perfect location it will additionally offset itself to find even better fit.

Installation

npm i react-super-tooltip

Usage

1 . Import react-super-tooltip in your code

import ReactSuperTooltip from 'react-super-tooltip'

2 . Wrap your element in <ReactSuperTooltip> component

<ReactSuperTooltip>
  <button>Hover me</button>
</ReactSuperTooltip>

3 . That's it

Options

  • Each <ReactSuperTooltip /> can have its own props which will override default behavior for that specific tooltip, for example <ReactSuperTooltip trigger="click" />
NameTypeDefaultDescription
contentNodeTooltip content
triggerStringhoverHow to trigger tooltip (Available: hover, click)
ignoreTriggerBoolfalseTooltip can be opened only manually (by calling tooltipRef.show()), trigger is ignored
preferredPositionStringrightDefine your preferred position that will be used if multiple positions are possible
interactiveBooltrueAllow mouse events on the tooltip and keep it open when hovered
componentComponentdivChoose container element
arrowSizeNumber6Tooltip arrow size
arrowColorString#fffTooltip arrow color
offsetNumber0Number of pixels to offset tooltip away from the element
boundsStringSelector or HTML element to be used as boundaries
keepInBoundsBoolfalseKeep the tooltip inside the boundaries even if it covers the target element
onShowFunctionnoopCallback function that will be called when tooltip is shown
onHideFunctionnoopCallback function that will be called when tooltip is hidden

Manually showing and hiding tooltips

tooltipRef.show()

Show the tooltip manually, for example:

import ReactSuperTooltip from 'react-super-tooltip';

<ReactSuperTooltip ref={ref => this.tooltipRef = ref}>
  <button>I'm a button</button>
</ReactSuperTooltip>

<button onClick={() => { this.tooltipRef.show() }}>Show tooltip</button>

tooltipRef.hide()

Hide the tooltip manually

import ReactSuperTooltip from 'react-super-tooltip';

<ReactSuperTooltip ref={ref => this.tooltipRef = ref}>
  <button>I'm a button</button>
</ReactSuperTooltip>

<button onClick={() => { this.tooltipRef.hide() }}>Hide tooltip</button>

License

MIT

FAQs

Last updated on 22 Apr 2021

Did you know?

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc