8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

如何在 Dash 中已禁用的切换​​按钮上显示悬停消息?

Derek Chia 2月前

25 0

我正在开发一个 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 显示一条消息解释为什么它被禁用,这应该在我将鼠标悬停在切换按钮上时出现。将鼠标悬停在禁用按钮上时,工具提示应该仍然可见。

帖子版权声明 1、本帖标题:如何在 Dash 中已禁用的切换​​按钮上显示悬停消息?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Derek Chia在本站《python》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 禁用, 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 。默认情况下,当目标元素悬停或聚焦时,工具提示将显示。

返回
作者最近主题: