Skip to content
Permalink
Browse files

refactored docs layout

  • Loading branch information...
justinrhodes1 committed Mar 2, 2019
1 parent 2a38de3 commit 26537214f34fe7e5022662dd7de2a8b24fa81e7b
@@ -15,7 +15,7 @@ target element with ease

## DEMO

Check out the [documentation & demo pages](https://justinrhodes1.github.io/react-power-tooltip/) to to see all use cases.
Check out the [documentation & demo](https://justinrhodes1.github.io/react-power-tooltip/) pages to see all use cases.

## Installation

@@ -26,6 +26,9 @@ npm install react-power-tooltip
```

## Usage

**Important**: Set the position of the hoverable parent component to *relative*.

```jsx
import React, { Component } from "react";
import Tooltip from "react-power-tooltip";

Large diffs are not rendered by default.

@@ -4,159 +4,161 @@ const Api = () => {
return (
<>
<h1>API Overview</h1>
<table>
<tbody>
<tr>
<th>Props</th>
<th>Type / Options</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>show</td>
<td>boolean: false | true</td>
<td>false</td>
<td>Mount tooltip if true</td>
</tr>
<tr>
<td>fontFamily</td>
<td>string: fontFamily</td>
<td>&#39;inherit&#39;</td>
<td>Font family of text</td>
</tr>
<tr>
<td>fontSize</td>
<td>string: px</td>
<td>&#39;inherit&#39;</td>
<td>Font size of text</td>
</tr>
<tr>
<td>fontWeight</td>
<td>string</td>
<td>&#39;bold&#39;</td>
<td>Font weight of text</td>
</tr>
<tr>
<td>color</td>
<td>string</td>
<td>&#39;inherit&#39;</td>
<td>Font color of text</td>
</tr>
<tr>
<td>animation</td>
<td>string: fade | bounce</td>
<td>&#39;fade&#39;</td>
<td>
Mount/Unmount anmation. For custom animations see examples for more
<a href="#custom-animations" style={{ color: 'purple', fontSize: '15px' }}> info</a>
.
</td>
</tr>
<tr>
<td>hoverBackground</td>
<td>string: hex colors</td>
<td>&#39;#ececec&#39;</td>
<td>Background color on hover</td>
</tr>
<tr>
<td>hoverColor</td>
<td>string: hex colors</td>
<td>&#39;#000000&#39;</td>
<td>Font color on hover</td>
</tr>
<tr>
<td>backgroundColor</td>
<td>string: hex colors</td>
<td>&#39;#ffffff&#39;</td>
<td>Background color</td>
</tr>
<tr>
<td>alert</td>
<td>string: rgb colors</td>
<td>false</td>
<td>Pulse animation</td>
</tr>
<tr>
<td>textBoxWidth</td>
<td>string: px | auto</td>
<td>&#39;150px&#39;</td>
<td>Width of the text box</td>
</tr>
<tr>
<td>padding</td>
<td>string: px</td>
<td>&#39;15px 20px&#39;</td>
<td>Padding of text</td>
</tr>
<tr>
<td>borderRadius</td>
<td>string: px</td>
<td>&#39;5px&#39;</td>
<td>Radius of corners</td>
</tr>
<tr>
<td>zIndex</td>
<td>string: number</td>
<td>&#39;100&#39;</td>
<td>Z-index of tooltip.</td>
</tr>
<tr>
<td>moveDown</td>
<td>string: px</td>
<td>&#39;0px&#39;</td>
<td>Downward position adjustment</td>
</tr>
<tr>
<td>moveRight</td>
<td>string: px</td>
<td>&#39;0px&#39;</td>
<td>Right position adjustment</td>
</tr>
<tr>
<td>static</td>
<td>boolean: false | true</td>
<td>false</td>
<td>Disable hover animations</td>
</tr>
<tr>
<td>flat</td>
<td>boolean: false | true</td>
<td>false</td>
<td>Disable shadows</td>
</tr>
<tr>
<td>lineSeparated</td>
<td>string: css border property</td>
<td>&#39;1px solid #ececec&#39;</td>
<td>Specifies line separation between options (optional).</td>
</tr>
<tr>
<td>arrowAlign</td>
<td>string: &#39;start&#39; | &#39;center&#39; | &#39;end&#39;</td>
<td>&#39;start&#39;</td>
<td>
Vertical or horizontal aligning along the left/right or
top/bottom textbox side respectively. See
<a href="#arrow-align" style={{ color: 'purple', fontSize: '15px' }}> examples </a>
for more information.
</td>
</tr>
<tr>
<td>position</td>
<td>
<p style={{ marginTop: '0' }}>
string: &#39;position1 position2&#39;
</p>
</td>
<td>&#39;right center&#39;</td>
<td>
Positions tooltip relative to target. See
<a href="#tooltip-positions" style={{ color: 'purple', fontSize: '15px' }}> examples </a>
for more information.
</td>
</tr>
</tbody>
</table>
<div className="tableContainer">
<table>
<tbody>
<tr>
<th>Props</th>
<th>Type / Options</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>show</td>
<td>boolean: false | true</td>
<td>false</td>
<td>Mount tooltip if true</td>
</tr>
<tr>
<td>fontFamily</td>
<td>string: fontFamily</td>
<td>&#39;inherit&#39;</td>
<td>Font family of text</td>
</tr>
<tr>
<td>fontSize</td>
<td>string: px</td>
<td>&#39;inherit&#39;</td>
<td>Font size of text</td>
</tr>
<tr>
<td>fontWeight</td>
<td>string</td>
<td>&#39;bold&#39;</td>
<td>Font weight of text</td>
</tr>
<tr>
<td>color</td>
<td>string</td>
<td>&#39;inherit&#39;</td>
<td>Font color of text</td>
</tr>
<tr>
<td>animation</td>
<td>string: fade | bounce</td>
<td>&#39;fade&#39;</td>
<td>
Mount/Unmount anmation. For custom animations see examples for more
<a href="#custom-animations" style={{ color: 'purple', fontSize: '15px' }}> info</a>
.
</td>
</tr>
<tr>
<td>hoverBackground</td>
<td>string: hex colors</td>
<td>&#39;#ececec&#39;</td>
<td>Background color on hover</td>
</tr>
<tr>
<td>hoverColor</td>
<td>string: hex colors</td>
<td>&#39;#000000&#39;</td>
<td>Font color on hover</td>
</tr>
<tr>
<td>backgroundColor</td>
<td>string: hex colors</td>
<td>&#39;#ffffff&#39;</td>
<td>Background color</td>
</tr>
<tr>
<td>alert</td>
<td>string: rgb colors</td>
<td>false</td>
<td>Pulse animation</td>
</tr>
<tr>
<td>textBoxWidth</td>
<td>string: px | auto</td>
<td>&#39;150px&#39;</td>
<td>Width of the text box</td>
</tr>
<tr>
<td>padding</td>
<td>string: px</td>
<td>&#39;15px 20px&#39;</td>
<td>Padding of text</td>
</tr>
<tr>
<td>borderRadius</td>
<td>string: px</td>
<td>&#39;5px&#39;</td>
<td>Radius of corners</td>
</tr>
<tr>
<td>zIndex</td>
<td>string: number</td>
<td>&#39;100&#39;</td>
<td>Z-index of tooltip.</td>
</tr>
<tr>
<td>moveDown</td>
<td>string: px</td>
<td>&#39;0px&#39;</td>
<td>Downward position adjustment</td>
</tr>
<tr>
<td>moveRight</td>
<td>string: px</td>
<td>&#39;0px&#39;</td>
<td>Right position adjustment</td>
</tr>
<tr>
<td>static</td>
<td>boolean: false | true</td>
<td>false</td>
<td>Disable hover animations</td>
</tr>
<tr>
<td>flat</td>
<td>boolean: false | true</td>
<td>false</td>
<td>Disable shadows</td>
</tr>
<tr>
<td>lineSeparated</td>
<td>string: css border property</td>
<td>&#39;1px solid #ececec&#39;</td>
<td>Specifies line separation between options (optional).</td>
</tr>
<tr>
<td>arrowAlign</td>
<td>string: &#39;start&#39; | &#39;center&#39; | &#39;end&#39;</td>
<td>&#39;start&#39;</td>
<td>
Vertical or horizontal aligning along the left/right or
top/bottom textbox side respectively. See
<a href="#arrow-align" style={{ color: 'purple', fontSize: '15px' }}> examples </a>
for more information.
</td>
</tr>
<tr>
<td>position</td>
<td>
<p style={{ marginTop: '0' }}>
string: &#39;position1 position2&#39;
</p>
</td>
<td>&#39;right center&#39;</td>
<td>
Positions tooltip relative to target. See
<a href="#tooltip-positions" style={{ color: 'purple', fontSize: '15px' }}> examples </a>
for more information.
</td>
</tr>
</tbody>
</table>
</div>
</>
);
};
@@ -13,7 +13,15 @@ const BasicUsage = () => {
import Tooltip from &#39;react-power-tooltip&#39;
</code>
</pre>
<h3>2) Add a hover state &amp; mouse event handler to your component.</h3>
<h3 style={{ padding: '10px 0px 0 0' }}>
2) Add a hover state &amp; mouse event handler to the enclosing target component.
</h3>
<h3 style={{ padding: '0 0 10px 0' }}>
<b> Important: </b>
Set the position of the target component to
<i> relative</i>
.
</h3>
<pre>
<code className="language-jsx">
{codeBasicComp}

0 comments on commit 2653721

Please sign in to comment.
You can’t perform that action at this time.