Как отобразить сообщение при наведении на отключенную кнопку переключения в Dash?
Я работаю над приложением Dash, в котором у меня есть кнопка переключения (dbc.Switch), которая отключается в зависимости от ввода пользователя. Я хотел бы отображать всплывающую подсказку при наведении, когда кнопка переключения отключена. Однако я заметил, что всплывающая подсказка не появляется, когда кнопка отключена. Вот код, который я использую:
import dash_bootstrap_components as dbc
from dash import Dash, html, dcc, Input, Output
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div(
[
dcc.Input(id='number-input', type='number', placeholder='Enter a number'),
dbc.Switch(
id = "toggle-button",
label = "Toggle Button",
style = {"display": "inline-block", "margin-right": "10px"}
),
dbc.Tooltip(
id = "toggle-tooltip",
target = "toggle-button",
placement = "top"
),
]
)
@app.callback(
Output("toggle-button", "disabled"),
Output("toggle-tooltip", "children"),
Input("number-input", "value")
)
def update_toggle(number):
if number is not None and number % 2 == 0:
return False, "Disabled for even numbers"
else:
return True, "This is a toggle button"
if __name__ == '__main__':
app.run_server(debug=True)
toggle-button отключается, когда входное число четное, и я бы хотел, чтобы toggle-tooltip отображал сообщение, объясняющее, почему оно отключено, это должно появляться, когда я навожу курсор на переключатель. Всплывающая подсказка должна оставаться видимой при наведении курсора на отключенную кнопку.
Ответы 1
Всплывающая подсказка не будет отображаться, если ее target отключена.
Один из способов исправить это — поместить переключатель «переключатель» в компонент и использовать этот компонент в качестве цели подсказки, например.
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
dcc.Input(id='number-input', type='number', placeholder='Enter a number'),
html.Span(id='toggle-button-wrapper', children=[
dbc.Switch(
id = "toggle-button",
label = "Toggle Button",
style = {"display": "inline-block", "margin-right": "10px"}
)
]),
dbc.Tooltip(
id = "toggle-tooltip",
target = "toggle-button-wrapper",
placement = "top"
)
])
@app.callback(
Output("toggle-button", "disabled"),
Output("toggle-tooltip", "children"),
Input("number-input", "value")
)
def update_toggle(number):
if number is not None and number % 2 == 0:
return True, "Disabled for even numbers"
else:
return False, "This is a toggle button"
if __name__ == '__main__':
app.run_server(debug=True)
Примечание. Поскольку вы хотите отключить кнопку, когда входное число четное, я инвертировал возвращаемые значения для свойства кнопки disabled.
Если вы не хотите использовать оболочку, другой способ исправить это — управлять всплывающей подсказкой с помощью обратного вызова :
Видимостью всплывающей подсказки можно управлять с помощью обратных вызовов, аналогично Компонент поповера. Просто установите желаемое значение
is_openв перезвонить. Если вы вручную контролируете значениеis_open, вы возможно, вы также захотите установитьtrigger=None. По умолчанию всплывающая подсказка будет отображаться когда целевой элемент наведен или сфокусирован.
Спасибо, это работает для меня @EricLavault