Support tooltips without IDs

[multimeric]

Support tooltips without IDs

[tcbegley]

Hi @multimeric,

Thanks for raising this. The data attribute you're referring to is indeed how Bootstrap JS works. However because Plotly Dash and all component libraries are built on React, the underlying implementation is quite different. In particular, this library is built on top of React-Bootstrap. You can see how Tooltips work here, and you'll notice it's quite different.

The ID / target pattern was arrived taking into account various constraints including limitations of Dash itself (some of which have been addressed since the first version of this library came out), and the way things are implemented in Reactstrap (a different React library with Bootstrap components that was originally the basis for dbc).

I'm open to alternative patterns that make things easier, as long as changes are backwards compatible.

Regarding your two suggestions, they both suffer from a major problem which is that I don't see how we could implement either option in a way that doesn't only work for components in this library. E.g. suppose I wanted to add a tooltip to a html.Div. We can target a particular id, but we don't have the ability to add a custom prop, nor do I see atm how we could search the whole tree of components for those data attributes.

[multimeric]

Okay, I see your point. From looking at the React Bootstrap docs, I wonder if adapting the following would be okay:

  const Link = ({ id, children, title }) => (
    <OverlayTrigger overlay={<Tooltip id={id}>{title}</Tooltip>}>
      <a href="#">{children}</a>
    </OverlayTrigger>

It's true that they use id here, but I don't think it's mandatory. We could call the Link element something more appropriate.