ToolTip component

[rreusser]

This PR adds a ToolTip component. In inline text it works like this:

<p>This is an inline <ToolTip direction="top" colors={{background:"#ccc", border:"#f00"}}>ToolTip top</ToolTip> tooltip.</p>

and renders like this:

The other tooltips are positioned absolutely as

<ToolTip direction="top" style={{position: 'relative', left: '140px', top: '-20px'}}>ToolTip top</ToolTip>

The intent is that the absolute CSS position is precisely where the tip of the caret sits, so that this component doesn't actually concern itself with positioning, hovering, etc. It is strictly the mechanical part of the box, along with the ability to position it easily.

I don't have strong feelings on whether it should do more to position itself on the screen or relative to a parent element or manage hovering by default, though my sense is that it's perhaps best to leave that to downstream consumers of the component.

[Marc-Andre-Rivet]

@rreusser Thanks for the suggestion! A tooltip component would be a nice addition.

A few thoughts:

1. I think that having the Tooltip wrap / decorate other components would make most sense for most Dash users (instead of leaving the positioning and visibility for the user to figure out) - this would be consistent with the way the Loading component works (https://dash.plotly.com/dash-core-components/loading)

2. It should be possible to make the Tooltip support either arbitrary content or support markdown like the table tooltip. The key here, depending on the approach, being to define the props in such a way they can be extended for additional capabilities later. Since we don't support components as props at the moment, that leaves us with two options I think: either a value and presentation combo that provides the value and how to evaluate it (e.g. text, markdown) or have a contextual component that can be.

3. Additional props like delay and duration would be interesting. Similar to what the dash-table has: https://github.com/plotly/dash-table/blob/dev/src/dash-table/dash/DataTable.js#L76

Overall this could look like:

dcc.Tooltip(
  delay=500,
  duration=2000,
  direction='top',
  children=[
      dcc.TooltipContent([dcc.Markdown(...) or html.Div(...), // what to display in tooltip]),
      dcc.TooltipContext([dcc.Input(...)]) // what the tooltip is for
  ]
)

// OR

dcc.Tooltip(
  delay=500,
  duration=2000,
  direction='top',
  value'='### Markdown Text',
  presentation='markdown' (or 'text')
  children=[
      dcc.Input(...)
  ]
)

[alexcjohnson]

@Marc-Andre-Rivet interesting concepts... let me provide a little more context though: A primary goal here is super-custom hover labels for dcc.Graph, and for this purpose the user needs to wire it up to the hoverData prop which (with #941) provides the positioning data within the graph as well as info about whether or not the tooltip should even be visible.

The use case you're thinking of is attaching a tooltip to a specific element or elements, and having it show (with a specific duration and delay) when you hover over those elements. That's a really great use case that we should definitely keep open a pathway for, though we don't need to do it now. I wonder if the concept here can be used as is for the graph use case (and any other similar manually-positioned-and-displayed use case) but we add another mode, potentially with one more component to use along with it, for the hover-on-element use case? Something like:

# one of the children of TooltipContext is a Tooltip?
dcc.TooltipContext(children=[dcc.Tooltip(...), "the content to hover on", dcc.Input(...)], duration, delay)

# or the Tooltip just gets a prop saying which component it should respond to
html.Div(id="my-content", children=...),
dcc.Tooltip(..., for="my-content", duration, delay)

@rreusser do you intend to update https://github.com/plotly/dash-docs/pull/1104 to use the new dcc.Tooltip component?

[rreusser]

Thanks for the suggestions, @Marc-Andre-Rivet! And apologies, I didn't give the full context of the PR, which is indeed that this is an alternate pathway to custom hovers, since working that into Plotly.js itself turned out to be rather limiting. I'll take a look at the loading component since that's actually necessary to use in this case as well.*

(*) specifically, when you hover over a plot it should show a client-side tooltip immediately so you are aware something is happening, and then it should show the tooltip content once returned from the server. I used the dash-is-loading attribute and some clever CSS in the original prototype, but a bit less magic seems preferable.

@alexcjohnson Thanks for the additional context! Yes, I'm trying to improve this component by first getting those docs to look right. As a former Bootstrap user, I do actually like the idea of for pointing toward the hovered element. I'm not sure if it's fully dash-idiomatic, but it does seem quite bit easier for me to make sense of on a quick read, and I think the implementation is not particularly difficult (look it up by id and position on hover, if for is specified)

[nicolaskruchten]

This needs plotly/plotly.js#5512 to land and be released in order to work, right?

[Marc-Andre-Rivet]

As discussed offline with @alexcjohnson might be best to rename this component to FixedTooltip (other naming options are welcome) and keep Tooltip available for a more general purpose component. As previously implemented this component would not allow compatibility with a Tooltip component with the characteristics described above.

[alexcjohnson]

superseded by #982