JQuery UI 未显示工具提示（序列化顶部提示不起作用）

Question

我之前使用过 Jquery UI 和工具提示，没有任何问题......这次由于某种原因我无法让它们工作。我试图让工具提示仅在鼠标悬停在 1 个元素上时显示。 < head > 是：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>
    <script>
  $("#barracks").tooltip({disabled:true});
    $(document).click(function() {
        if($("#barracks").tooltip("option", "disabled")) {
            $("#barracks").tooltip("enable");
            $("#barracks").tooltip("open");
            $("#barracks").off("mouseleave focusout");
        } else {
            $("#barracks").tooltip("close");
            $("#barracks").tooltip("disable");
        }
    });
    </script>

并在 < body >:

                <div class="col-lg-2 col-md-2 col-xs-2 thumb"> 
                    <img src="https://www. domain .com/adminp/occur/assets/img/soldier.jpg" id="barracks" class="img-thumbnail img-fluid rounded float-start max-width: 100%;" alt="infantry" title="Infantry">
                </div>
                <div class="col-lg-2 col-md-2 col-xs-2 thumb">
                    <img src="https://www. domain .com/adminp/occur/assets/img/gunner.jpg" id="barracks" class="img-thumbnail img-fluid rounded mx-auto d-block max-width: 100%;" alt="gunner" title="Gunner">                                 
                </div>
                <div class="col-lg-2 col-md-2 col-xs-2 thumb">
                    <img src="https://www. domain .com/adminp/occur/assets/img/pilot.jpg" id="barracks" class="img-thumbnail img-fluid rounded mx-auto d-block max-width: 100%;" alt="pilot" title="Pilot">                                 
                </div>                        
                <div class="col-lg-2 col-md-2 col-xs-2 thumb">
                    <img src="https://www. domain .com/adminp/occur/assets/img/astronaut.jpg" id="barracks" class="img-thumbnail img-fluid rounded float-end max-width: 100%;" alt="astronaut" title="Astronaut">    
                </div>

Infrantry 工具提示有效，但其他 3 个无效。. 没有显示工具提示

Answer 1

id

在 javascript/Jquery 中用于对元素进行事件处理时，将其视为每个元素的唯一标识符。

class

在 javascript/Jquery 中用于对一组元素进行事件处理时，请考虑作为组标识符。

您的问题是您使用了相同的

id

来处理工具提示，因此它覆盖了之前创建的工具提示。并且您只得到一个工具提示。

将

id

转换为

class

即可开始

工作片段：

$(".barracks").tooltip({
  disabled: true
});
$(document).click(function() {
  if ($(".barracks").tooltip("option", "disabled")) {
    $(".barracks").tooltip("enable");
    $(".barracks").tooltip("open");
    $(".barracks").off("mouseleave focusout");
  } else {
    $(".barracks").tooltip("close");
    $(".barracks").tooltip("disable");
  }
});

img {
  width: 150px;
  height: 150px;
  float: left;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>

<div class="col-lg-2 col-md-2 col-xs-2 thumb">
  <img src="https://img.freepik.com/free-psd/close-up-soldier-portrait_23-2151673837.jpg" class="barracks" class="img-thumbnail img-fluid rounded float-start max-width: 100%;" alt="infantry" title="Infantry">
</div>
<div class="col-lg-2 col-md-2 col-xs-2 thumb">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCOALKVluCAqmRC3fq4xbh8b4lCj2648karg&s" class="barracks" class="img-thumbnail img-fluid rounded mx-auto d-block max-width: 100%;" alt="gunner" title="Gunner">
</div>
<div class="col-lg-2 col-md-2 col-xs-2 thumb">
  <img src="https://media.istockphoto.com/id/465145894/photo/confident-pilot.jpg?s=612x612&w=0&k=20&c=QbwT6pcrv6dFH5z40Tr9AgIBbPmcFKNqTJ9EzlDyRns=" class="barracks" class="img-thumbnail img-fluid rounded mx-auto d-block max-width: 100%;" alt="pilot" title="Pilot">
</div>
<div class="col-lg-2 col-md-2 col-xs-2 thumb">
  <img src="https://t4.ftcdn.net/jpg/02/42/28/07/360_F_242280739_jAylYzC1xFqaaoDcuc1yfVfZWRDpEpjo.jpg" class="barracks" class="img-thumbnail img-fluid rounded float-end max-width: 100%;" alt="astronaut" title="Astronaut">
</div>