Javascript 当复选框悬停时显示工具提示文本

当鼠标悬停在座椅上时，我试图显示工具提示文本。它应该显示悬停复选框的

value

、

name

和

id

。下面是我的代码

此表包含所有复选框及其Id、名称和每个复选框的值

<?php
//For seats
$a = "notbooked";

//Disable value 
$c = 'disabled="true"';
?>


<div class="plane ">

  <ol class="cabin fuselage">

    <table style="background-color:#F4F5F6"  width="80%"  align="center" height="40%">
       <tr>
          <td align="center" width="10%"><img src="../images/stair.png" width="38" height="44" alt="Stair's"></td>
          <td align="center" width="10%">&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td rowspan="14"></td>
          <td align="center" width="10%">&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td align="center" width="10%"><img src="../images/driver2.png" width="42" height="66" alt="Driver Seat"></td>
      </tr>
      <tr>
          <td align="left">
            <input type="checkbox" id="A1" name="Normal" value="45" <?php if ($a=="notbooked"){ }elseif ($a=="bookedseat") {echo $c; }else{}?>>
            <label for="A1" class="<?php if ($a=="notbooked"){echo $a; }elseif ($a=="bookedseat") {echo $a; }else{}?>"></label>
         </td>
         <td align="right">
             <input type="checkbox" id="A2" name="Normal" value="35" <?php if ($a=="notbooked"){ }elseif ($a=="bookedseat") {echo $c; }else{}?>>
             <label for="A2" class="<?php if ($a=="notbooked"){echo $a; }elseif ($a=="bookedseat") {echo $a; }else{}?>"></label>
         </td>
         <td align="center">
             <input type="checkbox" id="A3" name="Normal" value="45" <?php if ($a=="notbooked"){ }elseif ($a=="bookedseat") {echo $c; }else{}?>>
             <label for="A3" class="<?php if ($a=="notbooked"){echo $a; }elseif ($a=="bookedseat") {echo $a; }else{}?>"></label>
         </td>
         <td align="center">
             <input type="checkbox" id="A4"  name="Normal" value="45" <?php if ($a=="notbooked"){ }elseif ($a=="bookedseat") {echo $c; }else{}?>>
             <label for="A4" class="<?php if ($a=="notbooked"){echo $a; }elseif ($a=="bookedseat") {echo $a; }else{}?>"></label>
         </td>
    </tr>

*,*:before,*:after {
  box-sizing: border-box;
}


.plane {
  margin: 40px auto;
  max-width: 200px;
}

.fuselage {
  border-right: 2px solid #000000;
  border-left: 2px solid #000000;
}

ol {
  list-style :none;
  padding: 0;
  margin: 0;
}

.row {

}

.seats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;  
}

input[type="checkbox"][id^="A1"] {
  display: none;
}

input[type="checkbox"][id^="A2"] {
  display: none;
}

input[type="checkbox"][id^="A3"] {
  display: none;
}

input[type="checkbox"][id^="A4"] {
  display: none;
}

label {

  padding: 1px;
  display: block;
  position: relative;
  margin: 1px;
  cursor: pointer;
}

:checked + label {

}

#booked {
  display: none;
}

.notbooked {
  background-image: url(../images/seat-image/5.png);
  background-position: right center;
  background-size: auto 100%;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
}
:checked + .notbooked {
  background-image: url(../images/seat-image/6.png);
  background-position: right center;
}

.bookedseat {
  background-image: url(../images/seat-image/seats.png);
  background-position: right center;
  background-size: auto 100%;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
}

#booked:checked + .bookedseat {

}

---

非常感谢您的帮助。

在发布问题之前，请确保您没有显示任何无用或无法理解的代码。 这里我们不需要你的php代码。假装。很多CSS也是无用的。 现在是回应。根据我的理解，我对你的问题做了一个清晰的编辑

$（'input[type=“checkbox”]”）。鼠标悬停（函数（）{
让$this=$（this），
id=“id:”+$this.attr（'id'），
name=“name:”+$this.attr（'name'），
value=“value:”+$this.val（），
br=“\r\n”；
$（this.attr（“title”，id+br+name+br+value）；
});
.app容器{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
调整内容：灵活启动；
}
标签{
填充：1px；
显示：块；
位置：相对位置；
保证金：1px；
光标：指针；
}
/*
输入[type=“checkbox”]{
显示：无；
}
*/

标签1
标签2
标签3
标签4
根据我的要求，当代表复选框的标签悬停时，它应该显示工具提示文本，我看不出我错在哪里。正如我所说，这是因为display none CSS属性。不能悬停未显示的图元。两者都不显示标题。尝试更改标签（显示）上的设置标题，并在标签上执行mousover
$（'label'）。mouseover（function（）{}）
Done。谢谢兄弟。
*,*:before,*:after {
  box-sizing: border-box;
}


.plane {
  margin: 40px auto;
  max-width: 200px;
}

.fuselage {
  border-right: 2px solid #000000;
  border-left: 2px solid #000000;
}

ol {
  list-style :none;
  padding: 0;
  margin: 0;
}

.row {

}

.seats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;  
}

input[type="checkbox"][id^="A1"] {
  display: none;
}

input[type="checkbox"][id^="A2"] {
  display: none;
}

input[type="checkbox"][id^="A3"] {
  display: none;
}

input[type="checkbox"][id^="A4"] {
  display: none;
}

label {

  padding: 1px;
  display: block;
  position: relative;
  margin: 1px;
  cursor: pointer;
}

:checked + label {

}

#booked {
  display: none;
}

.notbooked {
  background-image: url(../images/seat-image/5.png);
  background-position: right center;
  background-size: auto 100%;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
}
:checked + .notbooked {
  background-image: url(../images/seat-image/6.png);
  background-position: right center;
}

.bookedseat {
  background-image: url(../images/seat-image/seats.png);
  background-position: right center;
  background-size: auto 100%;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
}

#booked:checked + .bookedseat {

}