Showing Tooltip text when checkbox is hovered

Question

I am trying to show Tooltip Text when a mouse is hovered on a seat. It should show value, name and id of that hovered checkbox. This below are my codes.

This is the table which hold all checkboxes with their Id, Name and Values of each checkbox.

<?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>

Jquery

<script>
$('[type="checkbox"]').mouseover(function() {
  let $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);
})
</script>

And the CSS Codes are here, What this codes do is it change image of a seat based on php value that will be assigned on a checkbox.

*,*: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 {

}

Many thanks for any help.

Answer 1

Please, before posting a question, make sure you aren't displaying any useless or uninterpretable code. Here we don't need your php code. Fake it. A lot of CSS is useless too. Now for the response. I made a clean edit of your question from what I understand.

$('input[type="checkbox"]').mouseover(function() {
  let $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-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;  
}

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

/*
input[type="checkbox"] {
  display: none;
}
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app-container">
    <div class="input-container">
        <input type="checkbox" id="A1" name="Normal" value="45" disabled="true" title="Pepperoni">
        <label for="A1" class="notbooked">label 1</label>
    </div>
    <div class="input-container">
        <input type="checkbox" id="A2" name="Normal" title="Pepperoni2">
        <label for="A2" class="notbooked">label 2</label>
    </div>
    <div class="input-container">
        <input type="checkbox" id="A3" name="Normal" value="45" disabled="true" title="Pepperoni3">
        <label for="A3" class="bookedseat">label 3</label>
    </div>
    <div class="input-container">
        <input type="checkbox" id="A4" name="Normal" value="45" title="Pepperoni4">
        <label for="A4" class="bookedseat">label 4</label>
    </div>
</div>

From what i see, you try to set a title attribute on a checkbox but set it as display: none; from documentation this property remove the element from the accessibility tree, meaning you never reach the mouseover javascript event because it is not displayed to user. So the cursor can't hover it. If you wann display title, consider applying on an other item.