styled-tooltip-component
The bootstrap tooltip component made with styled-components.
This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application.
Installation
Note: this component has a peer dependency on
styled-components
> v4. To use this component you also need tonpm i styled-components -S
.
npm install --save styled-tooltip-componentnpm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies
Usage
For detailed information take a look at the documentation.
Note: if you want this example to work you need to install
styled-container-component
, andstyled-button-component
as well, but you do not need them to work properly
This example uses
styled-button-component
package
import React useState from 'react'; import Button from 'styled-button-component';import Tooltip TooltipArrow TooltipInner from 'styled-tooltip-component'; const SimpleTooltipToggle = const hidden setHidden = ; const position setPosition = ; return <Container = > <Button = = > Hover to toggle tooltip </Button> <Tooltip = = > <TooltipArrow /> <TooltipInner >Tooltip Title</TooltipInner> </Tooltip> </Container> ;;
Properties
Properties which can be added to the component to change the visual appearance.
pill
only on TooltipInner Type: booleannoRadius
only on TooltipInner Type: booleanhidden
Type: booleanright
Type: booleantop
Type: booleanleft
Type: booleanbottom
Type: booleantransitionProps
Type:: object
License
MIT © Lukas Aichbauer