There are no notes for this item.
| Prop | Required? | Type | Default | Description |
|---|---|---|---|---|
| tabIndex | No | custom | tabIndex for the tooltip toggle | |
| toolTipText | No | string | Text of the tooltip |
<div id="reactMount" data-tpl="tooltip">
<div><button tabindex="1">More Info</button>
<div aria-hidden="true">Tooltip text<br/><button tabindex="1">Close</button></div>
</div>
</div>
<script>
window.currentProps = {
"package": {
"name": "department-of-veteran-affairs/jean-pants",
"version": "0.1.0"
},
"assetPath": "/design-system/",
"isProduction": true,
"componentSourcePath": "./Tooltip.jsx",
"id": "default",
"title": "Tooltip",
"open": null,
"toolTipText": "Tooltip text"
}
</script>
import React from 'react';
import Tooltip from './Tooltip';
export default function TooltipExample(props) {
return (
<Tooltip
{...props}
tabIndex={1}/>
);
}
package:
name: department-of-veteran-affairs/jean-pants
version: 0.1.0
assetPath: /design-system/
isProduction: true
componentSourcePath: ./Tooltip.jsx
id: default
title: Tooltip
open: null
toolTipText: Tooltip text
import PropTypes from 'prop-types';
import React from 'react';
/**
* A tooltip to give users more information about the question.
*
* Validation has the following props.
* `open` - Open or closed.
* `toolTipText` - String with help text for user.
* `tabIndex` - Number for keyboard tabindex order.
* The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
*/
class ToolTip extends React.Component {
constructor(props) {
super(props);
this.handleOpen = this.handleOpen.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = {
closed: !this.props.open
};
}
componentWillMount() {
this.setState({ closed: true });
}
onBlur(e) {
if (!this.state.closed) {
const { currentTarget } = e;
setTimeout(() => {
if (!currentTarget.contains(document.activeElement)) {
this.setState({ closed: true });
}
});
}
}
handleOpen() {
this.setState({ closed: false });
}
handleClose() {
this.setState({ closed: true });
}
render() {
return (
<div onBlur={this.onBlur}>
<button tabIndex={this.props.tabIndex} onFocus={this.handleOpen} onClick={this.handleOpen}>More Info</button>
<div aria-hidden={this.state.closed}>
{this.props.toolTipText}
<br/>
<button tabIndex={this.props.tabIndex} onClick={this.handleClose}>Close</button>
</div>
</div>
);
}
}
ToolTip.propTypes = {
/**
* tabIndex for the tooltip toggle
*/
/* eslint-disable consistent-return */
tabIndex(props, propName, componentName) {
if (!/^\d+$/.test(props[propName])) {
return new Error(`Invalid prop \`${propName}\` supplied to` +
` \`${componentName}\`. Validation failed.`);
}
/* eslint-enable consistent-return */
},
/**
* Text of the tooltip
*/
toolTipText: PropTypes.string,
};
export default ToolTip;
import React from 'react';
import { shallow } from 'enzyme';
import { expect } from 'chai';
import { axeCheck } from '../../../lib/testing/helpers';
import Tooltip from './Tooltip.jsx';
describe('<Tooltip/>', () => {
it('should render', () => {
const tree = shallow(<Tooltip toolTipText="test" tabIndex={0}/>);
expect(tree.text()).to.contain('test');
});
it('should pass aXe check when closed', () => {
const check = axeCheck(<Tooltip toolTipText="test" tabIndex={0}/>);
return check;
});
it('should pass aXe check when open', () => {
const check = axeCheck(<Tooltip open toolTipText="test" tabIndex={0}/>);
return check;
});
});