如何使用 jquery 将工具提示添加到禁用的选择元素答案

【问题标题】：How to add tooltip to a disabled select element using jquery如何使用 jquery 将工具提示添加到禁用的选择元素
【发布时间】：2018-11-07 15:01:40
【问题描述】：

我有一个禁用的选择元素，如下所示，我无法查看其工具提示。

<div class="col-md-3">
        <select id="docpreset_colorformat" class="select2" name="docpreset_format_to" placeholder="Document format to"></select>
</div>

要禁用的 Jquery：

$("#docpreset_colorformat").prop("disabled", true);

用于添加工具提示的jquery

$("#docpreset_colorformat").prop('title', 'Disabled for selected doc type: ' + format_to);

工具提示适用于页面上的其他元素，例如“输入”类型。

不确定我在这里缺少什么。

任何帮助都将不胜感激，例如指向旧帖子的链接或提示。

【问题讨论】：

您的选择器错误。选择元素没有 id docpreset_colorformat
您使用什么插件用于选择控件以及什么框架，也许是 Bootstrap？此外，如果您可以制作一个显示问题的 sn-p，那将非常有用。
@Mohammad，这是一个例子。我还有很多其他的选择元素
如果你的选择器是正确的，代码就可以工作。 jsfiddle.net/ugdva2qp
@D.Smania，我没有使用插件。但是 bootstrap + Jquery 和 C# MVC

标签： jquery twitter-bootstrap jquery-select2

【解决方案1】：

我做了一些研究，select2 插件没有提供任何选项（实际上）来禁用为当前选定选项呈现的默认标题。所以这是我的方法：

1) 使用下一个解决方法禁用具有所选值的标题呈现：

$('.select2-selection__rendered').removeAttr('title');

2) 将包装容器元素添加到选择控件，并设置要呈现给该包装的标题。在我展示的示例中，我使用了 <spam> 元素，例如包装器。

查看下一个示例，第一个选择控件已经实现了前面解释的解决方法，而另一个是标准的：

$(document).ready(function()
{
    // Initialize select2 controls.

    $(".select2").select2();
    
    // Workaround for disable title rendering on the select2 plugin.

    $('.select2-selection__rendered').removeAttr('title');

    // Customize the "#sel1" control.

    $("#sel1").prop("disabled", true);
    $("#sel1").parent().prop("title", "Custom title for select control");
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<div class="container-fluid">
<div class="row">

  <div class="col-6">
    <spam>
    <select id="sel1" class="select2 form-control" placeholder="Placeholder...">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    </spam>
  </div>

  <div class="col-6">
    <select id="sel2" class="select2 form-control" placeholder="Placeholder...">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>
  
</div>
</div>

【讨论】：