Início / coding / Perguntas / 79177851
Accepted
bobafart
Asked: 2024-11-11 21:32:05 +0800 CST

JQuery UI não mostra dica de ferramenta (serializar dica de ferramenta não funciona)

  • 772

Eu já usei Jquery UI antes e dicas de ferramentas sem problemas... desta vez, por algum motivo, não consigo fazê-las funcionar. Estou tentando fazer com que uma dica de ferramenta seja exibida em apenas 1 elemento se o mouse for passado sobre ele. O <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>

e no < 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>

A dica de ferramenta Infrantry funciona, mas as outras 3 não. Nenhuma dica de ferramenta é exibida

javascript

1 respostas

  1. Best Answer

    idconsiderado como identificador único por elemento quando usado em javascript/Jquery para manipulação de eventos em um elemento.

    classconsiderado como identificador de grupo quando usado em javascript/Jquery para manipulação de eventos em um grupo de elementos.

    O problema é que você usou o mesmo idpara lidar com a dica de ferramenta e, portanto, ele está substituindo a criada anteriormente. E você obtém apenas uma dica de ferramenta.

    Converta idpara classe você está pronto para ir

    Trecho de trabalho:

    $(".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: 100px;
  height: 100px;
  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://www.orfonline.org/public/uploads/posts/image/Indian_Army.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://media.gettyimages.com/id/50604040/photo/indian-army-machine-gunners-at-base-camp-in-shamsharbara-mts-bordering-pakistan-on-lookout-for.jpg?s=612x612&w=gi&k=20&c=1xtLbCtkQ4ak12Azk_dUbtmYdI2rJyo3iz6SNXR7W8U=" 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://swarajya.gumlet.io/swarajya/2023-01/992bc74c-0afa-4509-b8c4-148f0faf3e89/acccccc.jpeg?w=610&q=50&compress=true&format=auto" 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://www.hsfc.gov.in/UploadFiles/Astronaut/Astronaut5092985885922926595.jpg" class="barracks" class="img-thumbnail img-fluid rounded float-end max-width: 100%;" alt="astronaut" title="Astronaut">
</div>

    • 1

relate perguntas