Material-ui: [Tooltip] Expose Composable Tooltip component

[SPAHI4]

Where i can find example of usage tooltip component without icon-button?

• [ ] Closes #3665, #4671, #5057, #5227, #5340, #5567, #5752, #6778

[alitaheri]

Tooltip isn't documented. That means it's _Implementation Detail_. In other words, it can change api as frequently as the other components might need features from it. Use it at you own risk.
But if you're ok with that the code from icon-button might help.

[oliviertassinari]

That's true. I think that exposing a composable Tooltip component would be great.
But that will require some work.

[AndrewMorsillo]

+1 for exposing a composable tooltip component.

In the mean time here is some rough code I made from pulling apart icon-button. Entirely untested but seems to work in basic cases in my app.

Tooltip = React.createClass({
    propTypes: {
        tooltip: React.PropTypes.string,
        tooltipPosition: React.PropTypes.string,
        tooltipStyles: React.PropTypes.object,
        touch: React.PropTypes.bool
    },
    getDefaultProps(){
        return {
            tooltipPosition: 'bottom-center'
        };
    },
    getInitialState(){
        return{
            tooltipShown: false
        };
    },
    getStyles() {
        let styles = {
            root: {
                position: 'relative',
                boxSizing: 'border-box'
            },
            tooltip: {
                boxSizing: 'border-box'
            }
        };
        return styles;
    },

    _showTooltip() {
        this.setState({tooltipShown: true});
    },

    _hideTooltip() {
        this.setState({tooltipShown: false});
    },

    _handleBlur(e) {
        this._hideTooltip();
        if (this.props.onBlur) this.props.onBlur(e);
    },

    _handleFocus(e) {
        this._showTooltip();
        if (this.props.onFocus) this.props.onFocus(e);
    },

    _handleMouseLeave(e) {
        this._hideTooltip();
        if (this.props.onMouseLeave) this.props.onMouseLeave(e);
    },

    _handleMouseEnter(e) {
        this._showTooltip();
        if (this.props.onMouseEnter) this.props.onMouseEnter(e);
    },
    mergeStyles(obj1, obj2){
        for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }
        return obj1;
    },
    render(){
        let {
            tooltip,
            touch,
            ...other,
            } = this.props;
        let tooltipPosition = this.props.tooltipPosition.split('-');
        let styles = this.getStyles();
        return(
            <div
                style={this.mergeStyles(styles.root, this.props.style)}
                onBlur={this._handleBlur}
                onFocus={this._handleFocus}
                onMouseLeave={this._handleMouseLeave}
                onMouseEnter={this._handleMouseEnter}>

                <MUI.Tooltip
                    ref="tooltip"
                    label={tooltip}
                    show={this.state.tooltipShown}
                    touch={touch}
                    style={this.mergeStyles(styles.tooltip, this.props.tooltipStyles)}
                    verticalPosition={tooltipPosition[0]}
                    horizontalPosition={tooltipPosition[1]}/>
                {this.props.children}
            </div>
        );

    }
});

[andrejunges]

Wouldn't be better we use the Popover component to display the tooltip?
I had cases where the tooltips were being hidden per other absolute components (Header)..

[alitaheri]

It would be better indeed. Care to submit a PR? :grin:

[andrejunges]

I'm gonna try to work on it over the weekend

[oliviertassinari]

I'm not sure using Popover is a good idea. That seems overkill. RenderToLayer would be better.
They seems to have an interesting solution https://github.com/react-toolbox/react-toolbox/blob/dev/components/tooltip/Tooltip.jsx.

[newoga]

I'm not sure using Popover is a good idea. That seems overkill.

Yeah I agree. Plus we really ought to look into finding a way to make Popover not dependent on scroll state.

[andrejunges]

oh good point, RenderToLayer is ok for me as well, since it won't be a children from the element 'responsible' for the tooltip...

Th only thing I didn't like about the react-toolbox solution is that the tooltip is placed inside the 'responsible' element (the thing I'm suggesting to change :smile: )

[alitaheri]

I'm not sure using Popover is a good idea.

Right, I totally forgot about render to layer O.o

[adrianmcli]

+1

Just started using MUI, and I'm thinking this is a much needed feature. How do we go about doing this? Can't we just grab the IconButton component and simply pull out the icon part? (look at @fignuts example above)

[ChenLi0830]

Material UI team has implemented a Tooltip component, but it's not documented yet. I tried it in my project and it works great so far.

Here is how I used it
<Tooltip show={this.state.showTooltip} label="tooltip label" horizontalPosition="left" verticalPosition="top" touch={true} />
Here is the link to the Tooltip src file

[ConAntonakos]

Can't wait for this. I've been using Google's MDL tooltip component so far, but would prefer a React implementation. Would love to contribute! @ChenLi0830, your link leads to a 404. :(

Is this what you meant? https://github.com/callemall/material-ui/blob/master/src/internal/Tooltip.js

[ChenLi0830]

Aha, they changed the file path. @ConAntonakos yeah, that's exactly what I meant. Change has been made. Thanks for pointing it out. :+1:

[puranjayjain]

@ChenLi0830 how can I make it work with the fab button, it seems the snippet would work with other components but not the fab button any ideas?

[ChenLi0830]

@puranjayjain Can you be more specific on what the problem is? I haven't been using it recently, but 2 months ago I was using it with a FAB with no problem.

Here is pretty much what I had,

                <FloatingActionButton
                    onTouchTap={this.handleFABClick}
                    onMouseEnter={()=>{this.setState({hoveredTooltip: true})}}
                    onMouseLeave={()=>{this.setState({hoveredTooltip: false})}}
                />
                <Tooltip show={this.state.hoveredTooltip}
                         label={"this is a tip"}
                         style={{right: 62, top:16}}
                         horizontalPosition="left"
                         verticalPosition="top"
                         touch={true}
                />

[puranjayjain]

@ChenLi0830 thanks a lot it worked! I was using the component inside the Fab component and overriding the styles (stupid mistake :smile: ) and that is the reason it wasn't working.

[ChenLi0830]

@puranjayjain Yeah use components which haven't been documented is not always straightforward. I'm glad it worked for you!

[rob2d]

I know this is just an experimental/proposed sort of thing, but is there a way to get it to appear above Dialogs? zIndex doesn't seem to help with this sense (either as an MUI param or through the style prop)

edit: nevermind, works! :)
(Putting it in Button content by default didn't work because of the overflow CSS; just had to make it visible Maybe for v0.16 something there can be a workaround for?)

[jadus]

@ChenLi0830 Do you know how to make tooltips appear under another component ? An svg icon for example.

[ChenLi0830]

Hi @jadus, I thought it should be similar to using it with other components. What problems are you facing? You are probably going to need to adjust thestyle{{right, top}} accordingly.

[nathanmarks]

• [ ] Component
• [ ] Tests (at least unit tests)
• [ ] Docs
• [ ] Demo

[nehalbhanushali]

@ChenLi0830 onMouseEnter and onMouseleave props are not there in the FAB component since 0.15.2. Also, not all components might have these or other mouse action props.

[ChenLi0830]

Hi @nehalbhanushali, sorry I am afraid I can't help you with this one. Haven't use MUI for a while... I've been working on some other projects lately.

[bobmonteverde]

A generic tooltip component would definitely be nice... I would think it would be easier than adding a tooltip option to all the components that _should_ have them.

Also, maybe not the right place to mention this, but am I the only one that would like to position a tooltip vertically center.... ie. '(top|middle|bottom)-(left|center|right)'

My current use case is for a custom 'collapsed drawer' state (where my menu shows just the icons for the buttons... in which case tooltips are almost required). Also, it pretty much only makes sense to show this tooltip 'middle-right' .....

I'm debating on what work around to use right now, sadly I can't use the IconButton instead of FontIcon in my MenuItems (does not render correctly).... gonna check out either utilizing Popover or the internal Tooltip as mentioned above... but utilizing Tooltip while it's not a documented component sounds like potential trouble in the future)

[arjshiv]

This would be exceptionally helpful!

[janzenz]

I've used @ChenLi0830 approach and it works but it's a lot of work. I can wrap everything into a component but before I do, I was hoping since it's months now, is there already an existing support for this feature or better approaches in the community?

[kybarg]

Has somebody started on porting it to next? How about this repo as example?

[kazazor]

Same here, in the 0.18.3 version I had a tool tip on a TableHeader component which was great! Now I cannot display my tooltips in an easy way :/

[IzaGz]

Its a shame such widely used repo, and such necessary thing as tooltip still doesn't work currently! Maybe someone can fix and commit it to make it work!? also tooltips does not work on popup menus. nothing helps(

[oliviertassinari]

@IzaGz Haters are always the sign that a project is successful. Also, you can find the Tooltip component on the v1-beta branch.

[rodrigocfd]

Just in case anyone is still struggling with this, I created a component wrapper that solved _my_ problem of having a tooltip in a FAB. I'm sharing it here if anyone is interested.