Mapple ToolTip: A light weighted and easy to customize React Tooltip.
npm install reactjs-mappletooltip


npm i reactjs-mappletooltip --save
`Demo and Mapple ToolTip generator
Generate the config for your Mapple ToolTip from here Demo and GeneratorUsage
`
var MappleToolTip = require('reactjs-mappletooltip');
const PageWithToolTip = () => {
return(
{/ Default Mapple /}
Show Mapple Tip on this
Hey! this is damn easy
{/ customized Mapple /}
Float in bottom direction
direction = 'bottom'
float = true
mappleType = 'warning'
);
}
``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.
##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
| Prop Name | Desciption | Options | Type |
|---|---|---|---|
| direction | Direction of the Mapple tip to be rendered |
| string |
| mappleType | Directly use the predefined 8 types of Mapple style |
| string |
| float | If set true, the Mapple floats with the cursor |
| boolean |
| shadow | Sets the shadow of the Mapple tip |
| boolean |
fadeInAnimation | Activates the 0.25s fade in transition to the Mapple visibility |
| boolean |
| tipPosition | Sets the position of triangular tip, under the Mapple Tip. Ranging from 0-100 percent. |
| number (percentage) |
| backgroundColor | Sets the background of the Mapple tip. This overwrites the defined Mapple themes |
| string |
| textColor | Sets the color of text of the Mapple Tip |
| string |
| padding | Sets the padding in the Mapple Tip |
| string |
| showMappleIf | Display/hide the Mapple Tool Tip on the content, based on condition |
| boolean |