reactHintFallback.tsx

const isBrowser: () => boolean = () => typeof window !== 'undefined'

function isInternetExplorer() {
    if (!isBrowser())
        return false

    var ua = window.navigator.userAgent
    var msie = ua.indexOf("MSIE ")

    if (msie > 0 || navigator.userAgent.match(/Trident.*rv\:11\./)) {
        return true
    }

    return false
}

class HintFallback extends React.Component<{}, {}> {

    componentDidMount() {
        window.setInterval(this.addTitleAttributes, 1000)
    }

    addTitleAttributes = () => {
        const attrName = 'data-tooltip'
        const array = $('[' + attrName + ']').toArray()

        for (const domEl of array) {
            const el = $(domEl)
            const text = el.attr(attrName)

            if (text && text !== el.attr('title'))
                el.attr('title', text)
        }        
    }

    render() {
        return null
    }
}

interface ILayoutProps extends React.Props<any> {
}

interface ILayoutState {
    mounted: boolean
}

export class Layout extends React.Component<ILayoutProps, ILayoutState> {

    state: ILayoutState = {
        mounted: false,
    }

    componentDidMount() {
        this.setState({ mounted: true })
    }

    render() {
        const { mounted } = this.state

        // can't render this server-side because of the IE conditional
        let reactHintEl: React.ReactNode = null

        if (mounted) {
            reactHintEl = 
                <ReactHint events={{ hover: true }} position="top"
                    attribute="data-tooltip" />

            // react-hint does not support IE. 
            if (isInternetExplorer()) {
                reactHintEl = <HintFallback />
            }
        }

        return (
            <div>
                {reactHintEl}               
            </div>
        );
    }
}