microtip-react

1.0.2 • Public • Published

microtip-react

Getting started

react-simple-tooltip

Demo

Try it out

Alt Text

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

Readme

Keywords

Package Sidebar

Install

npm i microtip-react

Weekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

29.1 kB

Total Files

8

Last publish

Collaborators

  • mksglu