JSPM – styled-tooltip-component@1.2.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.

Documentation
Why?
Installation
Usage
Properties
Related
License

Why?

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. To work with ease with any other libary or framework this component is build with styled-components.

Installation

Note: this component has a peer dependency on styled-components and styled-system. To use this component you also need to npm i styled-components styled-system -S.

$ npm i styled-tooltip-component -S

$ yarn add styled-tooltip-component

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

import React from 'react';

/*
  if you installed `styled-bootstrap-components` use

    import { ... } from 'styled-bootstrap-components'

  instead.
*/
import { Container } from 'styled-container-component';
import { Button } from 'styled-button-component';
import {
  Tooltip,
  TooltipArrow,
  TooltipInner,
} from 'styled-tooltip-component';

export class SimpleTooltipToggle extends React.Component {
  constructor(props) {
    super();
    this.state = {
      top: 0,
      left: 0,
      hidden: true,
    };
  }

  handleTooltip(ev, hidden) {
    this.setState({
      top: ev.target.offsetTop + 5,
      left: ev.target.offsetLeft + ev.target.offsetWidth,
      hidden,
    });
  }

  render() {
    const {
      top,
      left,
      hidden,
    } = this.state;
    return (
      <Container>
        <Button
          danger
          onMouseEnter={(ev) => this.handleTooltip(ev, false)}
          onMouseLeave={(ev) => this.handleTooltip(ev, true)}
        >
          Click to toggle popover
        </Button>
        <Tooltip
          hidden={hidden}
          style={{
            top: `${top}px`,
            left: `${left}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. This component uses styled-system.

hidden Type: boolean
right Type: boolean
top Type: boolean
left Type: boolean
bottom Type: boolean
m margin Type: string
mt margin-top Type: string
mr margin-right Type: string
mb margin-bottom Type: string
ml margin-left Type: string
mx margin-left and margin-right Type: string
my margin-top and margin-bottom Type: string
p padding Type: string
pt padding-top Type: string
pr padding-right Type: string
pb padding-bottom Type: string
pl padding-left Type: string
px padding-left and padding-right Type: string
py padding-top and padding-bottom Type: string
width Type: string
fontSize Type: string
fontWeight Type: string
textAlign Type: string
lineHeight Type: string
display Type: string
color Type: string
borderRadius Type: string
borderColor Type: string
border Type: string
borderTop Type: string
borderRight Type: string
borderBottom Type: string
borderLeft Type: string

styled-tooltip-component