Just in case anyone is interested, I’ve finally solved this issue.
Aware that in general you don’t want to remove ‘focus’ from a component manually as this is not good for accessibility purposes (keyboard users, vision impaired ppl etc). But in this case, the button focus in dash keeps getting triggered when I leave a modal, which then triggers the tooltip unnecessarily.
The quickest and dirtiest solution I’ve found is to embed a little clientside javascript callback in my dash app that is triggered by the button in question. You can then manually unfocus it with .blur() or refocus on another component with .focus().
Code below that just needs to be somewhere in your main python code for the dash app. Be careful if you are copying it because the inverted commas get a bit screwy from this markup.
#Test client side callback
app.clientside_callback(
“”"
function() {
alert(“Client side callback triggered”);
//document.getElementById(“some-other-component”).focus(); //use this to set the focus on whatever component you want
document.getElementById(“some-component”).blur(); //this will remove the focus from a selected component
return;
}
“”",
Output(‘blur-hidden-div’, ‘value’), #Callback needs an output, so this is dummy
Input(‘some-component’, ‘n_clicks’), #This triggers the javascript callback
prevent_initial_call=True
)
In this case I trigger the clienside callback with an input (some-component), which then runs the embedded javascript where I manually blur the focus of that component. You have to have an output for the callback. so I output to a hidden div component.