A simple UI library for light-weight, highly customizable React Tooltip. Very Easy to use and integrate.
To start with react-tooltip-lib
install:
yarn add react-tooltip-lib
// or
npm install --save react-tooltip-lib
import Tooltip from "react-tooltip-lib";
export default class App extends Component {
render() {
return (
<div>
<Tooltip
placement="bottom"
initialVisibility="show"
tipContent="This is React Tooltip library"
/>
</div>
);
}
}
// Your designed Component you can export from anywhere
const DesignedContentComponent = function() {
return <div>Hello ToolTip</div>;
};
export default class App extends Component {
render() {
return (
<div>
<Tooltip
placement="bottom"
initialVisibility="show"
tipContent={DesignedContentComponent}
/>
</div>
);
}
}
// Your Custom Icon. onClick or onHover you want to open Tooltip Content.By default icon is hint icons
import { ReactComponent as InformationIcon } from "../../icons/information.svg";
// Your designed Component you can export from anywhere
const DesignedContentComponent = function() {
return <div>Hello ToolTip</div>;
};
export default class App extends Component {
render() {
return (
<div>
<Tooltip
placement="bottom"
initialVisibility="show"
tipContent={DesignedContentComponent}
>
<InformationIcon />
</Tooltip>
</div>
);
}
}
initialVisibility
- ToolTip Content By Default Hide..tipContent
- Tiptool Content Pass as String or Pass and Designed Component
propName | propType | defaultValue | isRequired |
---|---|---|---|
initialVisibility | String | hide | - |
tipContent | String or Pass Functional Component | - | yes |
export default class App extends Component {
render() {
return (
<div>
<Tooltip
initialVisibility="show"
tipTitle="This is React Tooltip library"
theme="default"
/>
</div>
);
}
}
theme
- By Default value isdefault
.This value is string.
propName | propType | defaultValue | otherValues |
---|---|---|---|
theme | String | default | primary ,secondary ,success ,danger ,warning ,info ,light ,dark ,snow |
export default class App extends Component {
render() {
return (
<div>
<Tooltip
initialVisibility="show"
tipTitle="This is React Tooltip library"
trigger="onHover"
/>
</div>
);
}
}
export default class App extends Component {
render() {
return (
<div>
<Tooltip
initialVisibility="show"
tipTitle="This is React Tooltip library"
trigger="onHover"
/>
</div>
);
}
}
trigger
- By Default value isonHover
.This value is string.
propName | propType | defaultValue | otherValues |
---|---|---|---|
onHover | String | onHover | onHover ,onHover |
export default class App extends Component {
render() {
return (
<div>
<Tooltip placement="top" tipTitle="This is React Tooltip library" />
</div>
);
}
}
placement
- By Default value isauto
.This value is string.
propName | propType | defaultValue | otherValues |
---|---|---|---|
placement | String | auto | auto ,left ,right ,top ,bottom |
export default class App extends Component {
render() {
return (
<div>
<Tooltip
tipContentWidth="50px"
tipTitle="This is React Tooltip library"
/>
</div>
);
}
}
tipContentWidth
- Tip Content Width.borderRadius
- Border radius.fontWeight
- css properties.tipTextTransform
- Css properties text trasform.tipContentPadding
- Tip content Padding.arrowSize
- arrow size between content and icon..iconSize
- Default Icon Size.color
- Content Color.bg
- Background color.
propName | propType | defaultValue | otherValues |
---|---|---|---|
tipContentWidth | String | auto | css Properties |
borderRadius | String | 2px | css Properties |
fontSize | String | 12px | css Properties |
fontWeight | String | 400 | css Properties |
tipTextTransform | String | none | css Properties |
tipContentPadding | String | auto | css Properties |
arrowSize | String | 4 | 1,2,3,4,5,6,... |
iconSize | String | 16px | css Properties |
color | String | Hex color | css Properties |
bg | String | Hex color | css Properties |
MIT © gauravverma029