Using html.Abbr for mouse-over explanations

Dash Python
1

I am looking into having mouse-over explanations for users to eliminate the need of using screen space for detailed explanations.

For this I’m using a wrapper that automatically extracts descriptions from the dcc components, for example the placeholder from the dropdown using:

def add_explanation(obj, text=""):
    """ add hover-explanation on mouse-over for objects, automatic for dropdowns """
    if (not text):
        try:
            title = obj.placeholder
        except:
            title = "??"
    return html.Abbr(obj, title=title)

add_explanation(
    dcc.Dropdown(
        placeholder="Select your desired elements",
        id="sample_element",
        options=['a','b','c']
    )
)

EDIT: restarting server and browser solved it. still unsure why it arose, but probably not a fault of Dash’s
OLD: However, I get some very unexpected behavior as shown below, where the mouse position, over-shadow, and hover-text are at 3 very different places. Any ideas why this occurs?

explanation_errors

2

Not that this is a direct answer to your issue, but I have implemented a similar help/tooltip feature using the popover component within dash bootstrap components. Another similar component is the tool tip, but I chose to go with the popover since it keeps the tip open whereas tooltip closed once you move the mouse.

You can also get pretty complex with what you put in the popover since in the end it’s all html/css. For example, here is a screen shot of one of my popovers that has links and a table in it

27%20PM
Screen Shot 2019-05-26 at 9.57.27 PM.png1870×1416 354 KB

1 Like
3

A bit late for the OP but for anyone getting here at this point…
Dropdown has an additional option (in addition to label, value and disabled) in the options dict called title which is meant just for that.
Not sure when it was added…