[Feature Request] customisable dcc.Tooltip position/direction

[celia-lm]

• Add the possibility to combine the existing directions: direction="bottom+right". dbc.Tooltip already includes this in their placement argument: https://dash-bootstrap-components.opensource.faculty.ai/docs/components/tooltip/
• (maybe) add an offset argument that allows developers to specify the distance between the hover point and the hover box. Some developers want the box to be further from the data point so that it (the data point) and its context can be seen better. It could look something like dcc.Tooltip(..., offset={"x":"15px", "y":"0px"})

Related requests:

• Tooltip direction auto #2358

Relevant code:

• https://github.com/plotly/dash/blob/master/components/dash-core-components/src/components/Tooltip.react.js#L44-L98
• Suggestion: make code combine the X and Y values of class .hover-right and .hover-bottom in the transform: translate(X,Y) code

Workaround with css

assets/styles.css

/* makes the hover box go to the bottom right corner */
.hover-content[class^="jsx-"] {
    transform: translate(0%,0%) !important;
}