600 West

Moreinfo 

<div id="" class="MoreInfo " style="" tabindex="0" data-content="?" aria-label="More Info">
    <div id="" class="Tooltip " style="">
        <h3 class=" " style="">
            Tooltip Title
        </h3>

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

    </div>

</div>
 
<div
    id="{{id}}"
    class="MoreInfo {{modifier}}"
    style="{{style}}"
    tabindex="0"
    data-content="{{content}}"
    aria-label="{{label}}"
>
    {{> @children}}
</div>
 
{
  "id": null,
  "modifier": null,
  "style": null,
  "content": "?",
  "label": "More Info",
  "children": [
    {
      "component": "tooltip"
    }
  ]
}
  • Content: 
    import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
const render = require('../../../helpers/render').render;

const MoreInfo = (props) => {
    return(
        <div
            id={props.id}
            className={cx(['MoreInfo', props.modifier])}
            tabIndex="0"
            aria-label={props.label}
        >
            {render(props.children)}
        </div>
    );
};

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

export default MoreInfo;
  • URL: /components/raw/moreinfo/MoreInfo.jsx
  • Filesystem Path: components/molecules/MoreInfo/MoreInfo.jsx
  • Size: 563 Bytes
  • Content: 
    .MoreInfo {
    @include circle-background($background: get-color(neutral, 400), $font-size: $font-size-fine, $size: $font-size-fine * 1.3);
    position: relative;
    display: inline-block;
    margin-left: Space(300);
    text-align: left;
    vertical-align: text-bottom;
    &::before {
        position: relative;
        top: .15em;
        display: inline-block;
        width: 100%;
        text-align: center;
        content: attr(data-content) " ";
    }
}
  • URL: /components/raw/moreinfo/MoreInfo.scss
  • Filesystem Path: components/molecules/MoreInfo/MoreInfo.scss
  • Size: 469 Bytes

MoreInfo

A MoreInfo component is used to indicate that there is additional information not currently visible to the user. Typically, it will contain a Tooltip as a child, which will become visible when the MoreInfo container is hovered or focused.

Best Practices

  • Place additional content (e.g. a Tooltip) within a MoreInfo container.
  • The default icon is a “?”, but it can be changed by passing a different character as the content prop.
  • Keep the icon to a single character so that it fits properly in the circle.

Accessibility

For screenreaders, the default label for a MoreInfo component is “More Info.” This can be overridden by the label prop.