React-bootstrap: Tooltip & OverlayTrigger do not work if an element is disabled

[wzup]

Tooltip & OverlayTrigger do not work.
<LinkContainer> is disabled. Why Tooltips do not work in this case? It is not right, it is not logical behavior. disabled is applied to <LinkContainer> component, not to <OverlayTrigger> or <Tooltip>. How to enable?

                <OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">Check this info.</Tooltip>}>
                    <LinkContainer to={{ pathname: '/foo', query: null }} onClick={this.onClick} disabled={true}>
                        <Button bsSize="sm">
                            <span className="foo">Foo</span>
                        </Button>
                    </LinkContainer>
                </OverlayTrigger>

[jquense]

that is correct. disabled elements don't receive mouse events and as such can't respond to mouse triggers like hover or be focused. This is how disabled elements work in browsers. you can wrap the disabled element in another div or span if you need to

[ajbeaven]

For a button, it's not as easy as wrapping the element in an inline (block) element. The button sits in front of the inline container so the container still does not receive the mouse events. You can work around this limitation by applying pointer-events: none to the disabled element.

[jirikrepl]

This code works fine https://gist.github.com/tmcf/3aed9465a20c8e97facc

Add this style to wrapping div <div style={{ display: 'inline-block', cursor: 'not-allowed' }}>

Add this style to disabled button style={{ pointerEvents: 'none' }}