我正在开发一个 Dash 应用程序，其中有一个切换按钮 (dbc.Switch)，它会根据用户的输入被禁用。当切换按钮处于活动状态时，我想显示悬停工具提示消息
我正在开发一个 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 显示一条消息解释为什么它被禁用，这应该在我将鼠标悬停在切换按钮上时出现。将鼠标悬停在禁用按钮上时，工具提示应该仍然可见。
禁用， 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 属性的返回值。
如果您不想使用包装器，解决这个问题的另一种方法是使用 回调控制工具提示 :
工具提示的可见性可以通过回调来控制，就像 Popover 组件一样。只需在
is_open回调中设置所需的值即可。如果您手动控制的值is_open，您可能还希望设置trigger=None。默认情况下，当目标元素悬停或聚焦时，工具提示将显示。