Almost pure css implementation of tooltip component. You will be able to control its visibility for instance with css pseudo elements.
Also you can use state to change isVisible property.
The component is designed for simple use cases where you will not need auto-positioning feature of `PopperTooltip` component.
We suggest using it for instance in a large lists of components, which all items should have tooltips, because it should be a better solution
in case of the performance of your application.
Remember to add `position: relative` to component which is the parent of tooltip. CssTooltip uses simple `position: absolute` css property.
Property `width` could be useful when you are displaying tooltip on a small element (for instance icon). By default it will inherit max-width from its parent.
Check out 'PROPS & METHODS' tabs. In addition to those listed props you can use any html div element attributes.
Css tooltip visibilty controlling example:
```css
.your-component {
position: relative;
&:hover .lc-css-tooltip {
opacity: 1;
visibility: visible;
}
}
```
```js
const tooltipPositions = [
"bottom",
"bottom-start",
"bottom-end",
"left",
"left-start",
"left-end",
"right",
"right-start",
"right-end",
"top",
"top-start",
"top-end"
];
const tooltipThemes = ["default", "invert", "important"];
const items = tooltipPositions.map(position => ({
key: position,
props: { name: position }
}));
const themeItems = tooltipThemes.map(theme => ({
key: theme,
props: { name: theme }
}));
initialState = {
selectedPosition: "bottom",
theme: "default",
isVisible: true
};
const handleItemSelect = item =>
setState({ selectedPosition: item, isVisible: true });
const handleThemeSelect = theme => setState({ theme, isVisible: true });
const getItemBody = props => {
if (!props) {
return null;
}
return