This package contains the Tooltip, a Material Design Component which is part of a bigger ecosystem called Slup

Description

From Google's Material Design guidelines:

Installation

This package can be installed with NPM

npm install --save @slup/tooltip

Usage

import Inferno from 'inferno'
import { Fab }     from '@slup/buttons'
import { Tooltip } from '@slup/tooltip'

export const Test = props =>
  <Tooltip text='Text'>
    <Fab>+</Fab>
  </Tooltip>

Available properties

| Props | Type | Default | Documentation | |------------- |:-------------:|:-------------:|------: | | text | string | empty | Link | | delay | string | empty | Link | | location | string | bottom | Link |

Property: 'text'

The only required property of this component: here you can write the tip that will be shown.

export const Test = props =>
  <Tooltip text='Log in'>
    <Icon />
  </Tooltip>

Property: 'delay'

This property will add the given delay to the transition.

export const Test = props =>
  <Tooltip text='Log in' delay='100ms'>
    <Icon />
  </Tooltip>

Property: 'location'

This property will position the tip.

export const Test = props =>
  <Tooltip text='Log in' location='top'>
    <Icon />
  </Tooltip>

There are many placements that you can choose:

• top-start
• top
• top-end
• right-start
• right
• right-end
• bottom-start
• bottom (default)
• bottom-end
• left-start
• left
• left-end