# All files / src/Tooltip Tooltip.styles.ts

100% Statements 8/8
100% Branches 4/4
100% Functions 0/0
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    3140x
    40x
    40x
    40x
    40x
    40x

    40x

    40x

     import styled from 'styled-components'
    import { getTypographyIntent } from '../Typography/Typography.styles'
    import { borderRadius } from '../_styles/borderRadius'
    import { colors } from '../_styles/colors'
    import { getShadow } from '../_styles/shadows'
    import { spacing } from '../_styles/spacing'

    export const StyledTooltip = styled.span`
      ${getTypographyIntent('small')}
      color: ${colors.white};
      max-width: 200px;
      padding: ${spacing.sm}px ${spacing.md}px;
      position: relative;

      // for IE11, use word-wrap property
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: normal;
    `

    export const StyledContainer = styled.span`
      display: inline-flex;
      background-color: ${colors.gray15};
      border-radius: ${borderRadius.md}px;
      ${getShadow(3, 'bottom')}

      & + [data-overlay-arrow] {
        background: ${colors.gray15};
      }
    `