Tooltip component created #9
Conversation
|
@ssi114 Can you check why CI build is failing and fix it? |
There was a problem hiding this comment.
Doesn't take care of web accessibility:
https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip
https://www.sarasoueidan.com/blog/accessible-tooltips/
| <span className={className} onMouseLeave={this.hideTooltip}> | ||
| {displayTooltip && ( | ||
| <div className={classNames('tooltip-bubble', position)}> | ||
| <div className="tooltip-message">{message}</div> |
There was a problem hiding this comment.
@ssi114 i would expect tool tip to get triggered from existing components like Button
|
|
||
| class Tooltip extends Component<Props, State> { | ||
| static defaultProps = { | ||
| message: '', |
There was a problem hiding this comment.
This Props will not be string.
| this.setState({ displayTooltip: true }); | ||
| }; | ||
|
|
||
| render() { |
There was a problem hiding this comment.
You should use react portal so that tooltip doesn't get cropped because of overflow hidden on parent.
| TooltipComponent = shallow(<Tooltip>Test</Tooltip>); | ||
| }); | ||
|
|
||
| test('should render correctly', () => { |
There was a problem hiding this comment.
This test will not be enough
| import styles from './Tooltip.style'; | ||
| import type { Props, State } from './types'; | ||
|
|
||
| class Tooltip extends Component<Props, State> { |
There was a problem hiding this comment.
@ssi114 this component can be PureComponent and not a Component
| }; | ||
|
|
||
| componentDidMount() { | ||
| document.addEventListener('keyup', (e: KeyboardEvent) => { |
There was a problem hiding this comment.
keyup event should change to keydown and event type could be KeyboardEvent use SyntheticEvent instead it will cover both Mouse and Keyboard
| </div> | ||
| )} | ||
| <span className="tooltip-trigger" role={ariaRole}> | ||
| {children} |
There was a problem hiding this comment.
Children should be body of tooltip and not the trigger
|
@vinodloha I am picking up this task |
3 participants
No description provided.