Feature request for tooltip component

[jenniferarnesen]

The dashboard PWA spec calls for certain buttons to be disabled when offline. Disabled buttons should show a tooltip. For example, from the design document:

Entering create mode while offline is not supported. If visible, the + button is disabled. Hovering the button triggers a tooltip with the content “Cannot create a dashboard while offline”.. Since disabled buttons do not listen to mouse events (like hover), I need to find a different way to trigger the Tooltip.

Current code:

    <Tooltip
        content={
            isOnline
                ? i18n.t('Create new dashboard')
                 : i18n.t('Cannot create a dashboard while offline'
        }
     >
        <Button
            disabled={!isOnline}
            onClick={enterNewMode}     
        />
    </Tooltip>

Locally I can achieve it with the following (note the style on Tooltip and ComponentCover is added in the browser rather than style or className attribute since those components don't apply those props like I needed)

    <Tooltip
        style={{display: 'inlineBlock', position: 'relative'}}
        content={
            isOnline
                ? i18n.t('Create new dashboard')
                 : i18n.t('Cannot create a dashboard while offline'
        }
    >
        <Button
            disabled={!isOnline}
            onClick={enterNewMode}     
        />
        {!isOnline && <ComponentCover style={{cursor: 'notAllowed'}}/>}
    </Tooltip>

Is there a way to do this that I've missed or shall I put in a feature request?

[varl]

This should definitely be possible using the first example you posted: <Tooltip><Button/></Tooltip>

Investigating why it doesn't work as expected.

[jenniferarnesen]

I think it is because the Button doesn't propagate the mouseOver event since it is disabled? If I hover just outside the button (in the right margin area), then I do get the tooltip

[jenniferarnesen]

@varl Shall I create a Jira issue for this one?

[varl]

@jenniferarnesen yeah, go ahead. 👍

[HendrikThePendric]

Since disabled buttons do not listen to mouse events (like hover), I need to find a different way to trigger the Tooltip.

@jenniferarnesen This analysis is completely correct. However, since we realised it would be hard to anticipate all use cases when we were working on the Tooltip component, we also allowed for working with this component using "renderProps". By using "renderProps" your use case would be supported like so:

export const DisabledButton = () => {
    const disabled = false
    return (
        <Tooltip content="Test">
            {({ onMouseOver, onMouseOut, ref }) => (
                <span
                    onMouseOver={onMouseOver}
                    onMouseOut={onMouseOut}
                    ref={ref}
                >
                    <Button
                        disabled={disabled}
                        onClick={() => {
                            console.log('test')
                        }}
                    >
                        Disabled
                    </Button>
                    <style jsx>{`
                        span {
                            display: inline-flex;
                            pointer-events: all;
                            cursor: ${disabled ? 'not-allowed' : 'block'};
                        }
                        span > :global(button:disabled) {
                            pointer-events: none;
                        }
                    `}</style>
                </span>
            )}
        </Tooltip>
    )
}

@varl I personally don't think we should add built-in support for showing tooltips on disabled elements. Do you agree?

[jenniferarnesen]

@HendrikThePendric One small addition (internalOnMouseOver) and it is doing what I want (showing a tooltip only when button is disabled)

<Tooltip
            content={notAllowed ? i18n.t('Not available offline') : ''}
            openDelay={200}
            closeDelay={100}
        >
            {({ onMouseOver, onMouseOut, ref }) => {
                const internalOnMouseOver = () => notAllowed && onMouseOver()
                const internalOnMouseOut = () => notAllowed && onMouseOut()

                return (
                    <span
                        onMouseOver={internalOnMouseOver}
                        onMouseOut={internalOnMouseOut}
                        ref={ref}
                    >
                        <Button disabled={notAllowed} {...rest}>
                            {children}
                        </Button>
                        <style jsx>{`
                            span {
                                display: inline-flex;
                                pointer-events: all;
                                cursor: ${notAllowed ? 'not-allowed' : 'block'};
                            }
                            span > :global(button:disabled) {
                                pointer-events: none;
                            }
                        `}</style>
                    </span>
                )
            }}
        </Tooltip>