[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;
}

[yuvashrikarunakaran]

Add Combined Directions Support
In Tooltip.react.js, update the direction handling logic

const DIRECTIONS = {
top: "translate(0, -100%)",
bottom: "translate(0, 0%)",
left: "translate(-100%, 0)",
right: "translate(100%, 0)"
};

function getTransform(direction) {
const directions = direction.split('+');
let transformX = 0, transformY = 0;

directions.forEach(dir => {
    const [x, y] = DIRECTIONS[dir].match(/-?\d+%/g) || [0, 0];
    transformX += parseFloat(x);
    transformY += parseFloat(y);
});

return `translate(${transformX}%, ${transformY}%)`;

}