Skip to content

reachtokish/rctx-tooltip

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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