✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

How to fix blurry Dash Bootstrap Popover and Tooltip in Chrome?

image

This is my code:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import base64
import pandas as pd
import plotly.express as px

app = dash.Dash(name,external_stylesheets=[dbc.themes.JOURNAL])
app.layout = html.Div(
[
dbc.Button(
“Click to toggle popover”, id=“popover-target”, color=“danger”
),
dbc.Popover(
[
dbc.PopoverHeader(“Popover header”),
dbc.PopoverBody(“And here’s some amazing content. Cool!”),
],
id=“popover”,
is_open=False,
target=“popover-target”,
),
]
)

@app.callback(
Output(“popover”, “is_open”),
[Input(“popover-target”, “n_clicks”)],
[State(“popover”, “is_open”)],
)
def toggle_popover(n, is_open):
if n:
return not is_open
return is_open

if name == ‘main’:
app.run_server(port=3004)

Your example works ok for me in Chrome, but I can recreate the blurriness by zooming in. Try selecting View > Actual size in Chrome and it should reset things if you have inadvertently zoomed.

Interestingly zooming in Firefox doesn’t cause the same problem, I guess there’s a difference in how they render certain fonts?

Thanks for checking it for me. My zoom setting is at 100% and I still have the blur. As you said, the text is clear in Firefox. Things improved in Chrome when I added
style={‘backface-visibility’: ‘hidden’,‘transform’: ‘perspective(1px)’}, but it is not perfect. I can also see the blur when I click on the Popover demo in the Dash Bootstrap Component Website as well.