blockstack-ui/dist/components/tooltip/index.js

Blockstack UI components built with css-in-js and styled-system.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Tooltip = void 0;

var _systemComponents = _interopRequireDefault(require("system-components"));

var _styledSystem = require("styled-system");

var _primitives = require("../primitives");

var Tooltip = (0, _systemComponents.default)({
  is: _primitives.Box,
  color: 'white',
  bg: 'black',
  blacklist: _primitives.blacklist
}, function (props) {
  return {
    display: 'inline-block',
    position: 'relative',
    color: 'inherit',
    backgroundColor: 'transparent',
    zIndex: 99999,
    '&::before': {
      display: 'none',
      fontFamily: (0, _styledSystem.themeGet)("fonts.default")(props),
      content: "\"" + props.text + "\"",
      position: 'absolute',
      bottom: '100%',
      left: '50%',
      transform: 'translate(-50%, -4px)',
      whiteSpace: 'nowrap',
      fontSize: '12px',
      paddingTop: '4px',
      paddingBottom: '4px',
      paddingLeft: '8px',
      zIndex: 99999,
      paddingRight: '8px',
      color: (0, _styledSystem.themeGet)("colors." + props.color)(props),
      backgroundColor: (0, _styledSystem.themeGet)("colors." + props.bg)(props),
      borderRadius: (0, _styledSystem.themeGet)('radii.1')(props) + "px"
    },
    '&::after': {
      display: 'none',
      position: 'absolute',
      bottom: '100%',
      left: '50%',
      transform: 'translate(-50%, 8px)',
      content: '" "',
      zIndex: 99999,
      fontFamily: 'default',
      borderWidth: '6px',
      borderStyle: 'solid',
      borderColor: 'transparent',
      borderTopColor: (0, _styledSystem.themeGet)("colors." + props.bg)(props)
    },
    '&:hover': {
      '&::before, &::after': {
        display: 'block'
      }
    }
  };
}, 'space', 'color');
exports.Tooltip = Tooltip;
Tooltip.displayName = 'Tooltip';
Tooltip.defaultProps = {
  bg: 'blue.dark',
  color: 'blue.light',
  zIndex: 999
};