[Tooltip] Expose Composable Tooltip component

[SPAHI4]

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

• Closes [IconButton] Tooltip in Chrome #3665, [IconButton] Tooltip hidden behind TableRowColumn's row #4671, Icon button tooltips misaligned #5057, [IconButton] Issues with IconButtons with both disabled and tooltip props #5227, Tooltips shown over a RadioButtonGroup are unreadable #5340, [Tooltip] Invalid Value Calculated on Tooltip when Running Tests #5567, tooltips showing below TextFields  #5752, Change IconButton's property tooltipStyles to tooltipStyle #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.

[evelant]

+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? 😁

[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.

[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.