0.0.4 • Published 2 years ago
c5-tooltips v0.0.4
Tooltip Library
This is a small tooltip utility
To install
npm install c5-tooltips
usage:
import ToolTipController from 'c5-tooltips';
import '../node_modules/c5-tooltips/dist/css/c5-tooltip.min.css';
<ToolTipController>
<button tool-tip="Here is my tooltip">Click me</button>
</ToolTipController>;
Directions: top, bottom, right, left; right now, this is only scanning top level components. Children will not currenly be visible to the ToolTipController. Here are some optional props:
<ToolTipController direction="bottom">
<p>This paragraph does not have a tooltip</p>
<button>No Tooltip</button>
<button tool-tip="This button has a tooltip">Click Me</button>
</ToolTipController>
So, basically just wrap some components in a ToolTipController and for any element that you want to have a tool-tip, just add the attribute "tool-tip" and the ToolTipController will make a tooltip available to you. You can also add Components as tooltips:
const ComplexComponent = () => {
return (
<div style={{ borderRadius: '10px' }}>
<div
style={{
borderBottom: '2px solid black',
fontSize: '1.2rem',
fontWeight: 'bold',
}}
>
Title
</div>
<div>Here is the body of my tooltip</div>
</div>
);
};
<ToolTipController>
<div tool-tip={<ComplexComponent />}>
This div should show a complex component
</div>
</ToolTipController>;
You can also just cherry pick the Tooltip Component and use it stand alone
import { Tooltip } from 'c5-tooltips';
<Tooltip content="Here is my tooltip content" direction="right" delay={400}>
<button>Im a button</button>
</Tooltip>;