microtip-react

Getting started

Demo

Try it out

Installation

via npm

npm install microtip-react --save

Usage

Attached to a Component

import React from "react"
import Tooltip from "microtip-react"
import "./App.css"

const App = () => (
  <div className="tooltipContainer">
    <Tooltip
      label="Hi!"
      position="bottom"
      size="small"
      duration="0.5s"
      delay="0.2s"
      fontWeight="bold"
      textTransform="capitalize"
    >
      <button>My Button</button>
    </Tooltip>
  </div>
)

export default App

.tooltipContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
}

Props

| Name | PropType | Description | Default | | ------------- | ---------------- | ------------------------------------------------------------------------------------------------------------- | -------- | | label | PropTypes.string | Tooltip content | Hi! | | position | PropTypes.string | Tooltip position top, top-left, top-right, bottom, bottom-left, bottom-right, left and right. | top | | size | PropTypes.string | Sets the font size of the text in tooltip | 13px | | duration | PropTypes.string | Specifies the duration of the tootltip transition | .18s | | delay | PropTypes.string | The delay on hover before showing the tooltip | 0s | | fontWeight | PropTypes.string | The font weight of the text in tooltip | normal | | textTransform | PropTypes.string | Controls the casing of the text | none |