600 West

Tooltip 

<div id="" class="Tooltip " style="">
    <h3 class=" " style="">
        Tooltip Title
    </h3>

    <p id="" class="">
        Tooltip body copy.
    </p>

</div>
 
<div id="{{id}}" class="Tooltip {{modifier}}" style="{{style}}">
  {{> @children}}
</div>
 
{
  "id": null,
  "modifier": null,
  "style": null,
  "children": [
    {
      "component": "heading",
      "context": {
        "level": 3,
        "text": "Tooltip Title"
      }
    },
    {
      "component": "p",
      "context": {
        "text": "Tooltip body copy."
      }
    }
  ]
}
  • Content: 
    import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
const render = require('../../../helpers/render').render;

const Tooltip = (props) => {
    return(
        <div
            id={props.id}
            className={cx(['Tooltip', props.modifier])}
        >
            {render(props.children)}
        </div>
    );
};

Tooltip.propTypes = {
    id: PropTypes.string,
    modifier: PropTypes.string
};

export default Tooltip;
  • URL: /components/raw/tooltip/Tooltip.jsx
  • Filesystem Path: components/molecules/Tooltip/Tooltip.jsx
  • Size: 467 Bytes
  • Content: 
    @import "../../axioms/Tooltip";
.Tooltip {
    @include tooltip(
        $width: 20rem,
        $position: below,
        $vOffset: calc(100% + 1.2em),
        $hOffset: -43px
    );
    display: none;
}
.Tooltip:hover,
*:focus > .Tooltip,
*:hover > .Tooltip {
    display: block;
}
  • URL: /components/raw/tooltip/Tooltip.scss
  • Filesystem Path: components/molecules/Tooltip/Tooltip.scss
  • Size: 283 Bytes

Tooltip

Tooltip is a component that is hidden until its parent is hovered or focused. When visible, a Tooltip overlays the content below its parent container.

Best Practices

  • Most often, a Tooltip is used within a MoreInfo container.
  • Ensure that the parent container of a Tooltip is focusable (i.e. has a tabindex of 0).

Accessibility

The parent container of a Tooltip should be focusable. Otherwise, keyboard and screenreader users will not be able to consume its content.