Reactjs - Mapple ToolTip

A light weighted, easy and customizable tool tip for your app. Mapple is crafted in an elegant manner.

!Mapple Image

Installing

``
npm i reactjs-mappletooltip --save
`

Demo and Mapple ToolTip generator

Generate the config for your Mapple ToolTip from here Demo and Generator

Usage

!Default

`
var MappleToolTip = require('reactjs-mappletooltip');
const PageWithToolTip = () => {
return(



);
}
``
Isn't it super easy to start wwiith Mapple ToolTip :sunglasses:

The Mapple-ToolTip seeks for two child elements. When the mouse pointer is hovered on the _first child_, div in the example, the Mapple ToolTip appears on top of the first child with the _second child_ as the content within the tip.

Preview of defined styles

!8styles

##Highlights
* Start with _8 pre-defined Mapple ToolTip themes_
* _Customize_ the Mapplet ToolTip to get your own theme.
* Supports _multiline content_ in Mapple Tip
* Supports _images with text_ within the Tip

Mapple Tool Tip Props

Prop Name	Desciption	Options	Type
direction	Direction of the Mapple tip to be rendered	top (default) right bottom left	string
mappleType	Directly use the predefined 8 types of Mapple style	default (default) ching light contra success warning info error	string
float	If set true, the Mapple floats with the cursor	false (default) true	boolean
shadow	Sets the shadow of the Mapple tip	false (default) true	boolean
fadeInAnimation	Activates the 0.25s fade in transition to the Mapple visibility	true (default) false	boolean
tipPosition	Sets the position of triangular tip, under the Mapple Tip. Ranging from 0-100 percent.	50 (default) 0 - 100	number (percentage)
backgroundColor	Sets the background of the Mapple tip. This overwrites the defined Mapple themes	black (default) any color	string
textColor	Sets the color of text of the Mapple Tip	white (default) any color	string
padding	Sets the padding in the Mapple Tip	'8px 12px' (default) CSS style padding property	string
showMappleIf	Display/hide the Mapple Tool Tip on the content, based on condition	true (default) any condition	boolean