reachtokish / rctx-tooltip

Tooltip for React library

rctx-tooltip

Tooltip package extensively for react library

Installation

npm install --save rctx-tooltip

Usage

import React, { Component } from 'react';
import RCTXTooltip from 'rctx-tooltip';

class Example extends Component {
  render () {
    return (
      <RCTXTooltip>
        <button>Hover over me</button>
      </RCTXTooltip>
    )
  }
}

Key features

• Accept string or html.
• Inbuild animation like zoom or fade.
• Position the tooltip like however you want. You can specify offset as well.
• Add class to the tooltip or tooltip container element and style it however you want.
• Bunch of events like onShown or onHidden.
• Control scroll or resize hide.
• Append the tooltip anywhere you want.

Options

Checkout the example demo

Name	Type	Options	Description
content	String or Html	default String	It takes String or Html as input
isVisible	Boolean	true / false Default: false	Show hide tooltip based on value
position	String	"top left" / "top right" / "bottom left" / "bottom right" / "top center" / "right center" / "bottom center" / "left center" (+ is also applicable after top/right bottom/left like "top+10 left") Default: "top left"	Set tooltip position
animation	String	"fade" / "zoom" Default: "fade"	Set animations for tooltip
event	String	"hover" / "click" / "focus" Default: "hover"	Show tooltip on hover
delayHide	Number	Any number	Hides tooltip in delay time mentioned
delayShow	Number	Any number	Show tooltip in delay time mentioned
tooltipClass	String	Any string	Add class in the tooltip popup
tooltipContainerClass	String	Any string	Add class in the tooltip container popup
eventOff	String	"dblclick"	On double click only close the tooltip
scrollToHide	Boolean	true / false Default: true	On window scroll hides the tooltip
resizeToHide	Boolean	true / false Default: true	On window resize hides the tooltip
appendTo	String	"body" / ".your_class_wrap" / "#your_id_wrap" Default: Enclosed element	Append tooltip inside the input element
onHidden	Function	onHidden={() => console.log("I am hidden!!")}	Invokes after tooltip gets hidden
onShown	Function	onShown={() => console.log("I am visible!!")}	Invokes after tooltip gets visible

Contributing 🙏

We will welcome any kind of contribution, small to big, suggestion to bug fixing or even collaborating. You can fork the repo and then make some changes and make a pull request. We will review your code and merge it 👏.

License

MIT © reachtokish