m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Add 'interactive' tooltip prop (#8258)

Browse Source 
The 'interactive' prop for React Tippy will keep the tooltip open when
the user moves the mouse over the tooltip. This enables interactive
tooltips, where the user is expected to click on something in the
tooltip (e.g. a message with a link).
This commit is contained in:
Mark Stacey 2020-03-30 23:44:20 -03:00 committed by GitHub
parent f7504d153e
commit f9767ed191
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/app/components/ui/tooltip-v2.js
View File

@ -8,6 +8,7 @@ export default class Tooltip extends PureComponent {
children: null,
containerClassName: '',
html: null,
interactive: undefined,
onHidden: null,
position: 'left',
size: 'small',
@ -22,6 +23,7 @@ export default class Tooltip extends PureComponent {
containerClassName: PropTypes.string,
disabled: PropTypes.bool,
html: PropTypes.node,
interactive: PropTypes.bool,
onHidden: PropTypes.func,
position: PropTypes.oneOf([
'top',
@ -39,7 +41,21 @@ export default class Tooltip extends PureComponent {
}
render () {
const { arrow, children, containerClassName, disabled, position, html, size, title, trigger, onHidden, wrapperClassName, style } = this.props
const {
arrow,
children,
containerClassName,
disabled,
position,
html,
interactive,
size,
title,
trigger,
onHidden,
wrapperClassName,
style,
} = this.props
if (!title && !html) {
return (
@ -52,17 +68,18 @@ export default class Tooltip extends PureComponent {
return (
<div className={wrapperClassName}>
<ReactTippy
html={html}
arrow={arrow}
className={containerClassName}
disabled={disabled}
title={title}
position={position}
trigger={trigger}
hideOnClick={false}
size={size}
arrow={arrow}
html={html}
interactive={interactive}
onHidden={onHidden}
position={position}
size={size}
style={style}
title={title}
trigger={trigger}
>
{children}
</ReactTippy>