引导工具提示应在更改选择框上启用

Posted 2023-05-08

【中文标题】引导工具提示应在更改选择框上启用

【英文标题】：Bootstrap tooltip should enable on change select box

【发布时间】：2021-09-22 06:56:33

【问题描述】：

当我从选择框中选择 option 1 时，我想显示工具提示悬停消息。同时当我选择选项 2 时，选项 3 和选项 4 按钮应该被禁用。

我已尝试以下 javascript 代码，但无法在悬停时禁用/启用工具提示。

任何人都可以帮助我实现这一点，并放弃您的 cmets 以进一步澄清。

$(document).ready(function () 
    $(".btn-success").tooltip( title: "test tooltip", container: "body", placement: "top", trigger: "hover" );
);
$("#opts").change(function () 
    var getopt = $(this).find("option:selected").text();
    console.log(getopt, "getopt");
    if (getopt == "option 1") 
        $(".btn-success").addClass("disabled");
     else 
        $(".btn-success").removeClass("disabled");
    
);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-4">
            <select name="opts" id="opts" class="form-control">
                <option value="1">option 1</option>
                <option value="2">option 2</option>
                <option value="3">option 3</option>
                <option value="4">option 4</option>
            </select>
        </div>
    </div>
    <button class="btn btn-success" data-toggle="tooltip">Button Enable/Disable</button>
</div>

【参考方案1】：

如下我的代码，你需要添加$('.btn-success').tooltip('enable' or 'disable')like：

$(document).ready(function () 
    $(".btn-success").tooltip( title: "test tooltip", container: "body", placement: "top", trigger: "hover" );
);
$("#opts").change(function () 
    var getopt = $(this).find("option:selected").text();
    console.log(getopt, "getopt");
    if (getopt !== "option 1") 
        $('.btn-success').tooltip('disable')
        $(".btn-success").addClass("disabled");
     else 
        $('.btn-success').tooltip('enable')
        $(".btn-success").removeClass("disabled");
    
);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-4">
            <select name="opts" id="opts" class="form-control">
                <option value="1">option 1</option>
                <option value="2">option 2</option>
                <option value="3">option 3</option>
                <option value="4">option 4</option>
            </select>
        </div>
    </div>
    <button class="btn btn-success" data-toggle="tooltip">Button Enable/Disable</button>
</div>

选择选项1时，全部都是活动的，无法禁用。