JSPM – styled-tooltip-component@4.0.0

Package Exports

styled-tooltip-component

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-tooltip-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 to npm i styled-components -S.

npm install --save styled-tooltip-component
npm 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, and styled-button-componentas 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';

export const SimpleTooltipToggle = () => {
  const [hidden, setHidden] = useState(true);
  const [position, setPosition] = useState([0, 0]);

  return (
    <Container style={{ minHeight: '50vh' }} dFlex alignItemsCenter justifyContentCenter>
      <Button
        danger
        onMouseLeave={() => setHidden(true)}
        onMouseEnter={(ev) => {
          setHidden(false);
          setPosition([
            ev.target.offsetTop + 5,
            ev.target.offsetLeft + ev.target.offsetWidth,
          ]);
        }}
      >
        Hover to toggle tooltip
      </Button>
      <Tooltip
        hidden={hidden}
        style={{
          top: `${position[0]}px`,
          left: `${position[1]}px`,
        }}
        right
      >
        <TooltipArrow right />
        <TooltipInner right>Tooltip Title</TooltipInner>
      </Tooltip>
    </Container>
  );
};

Properties

Properties which can be added to the component to change the visual appearance.

pill only on TooltipInner Type: boolean
noRadius only on TooltipInner Type: boolean
hidden Type: boolean
right Type: boolean
top Type: boolean
left Type: boolean
bottom Type: boolean
transitionProps Type:: object

styled-tooltip-component