0

I am trying to show tooltips on table headers. I have "th" which are table headers. I put mouseenter and mouseleave events to show or hide tooltips on top of that table headers. It shows correctly if i don't scroll my table to right.

My Html:

<a id="toolTipContainer" class="animated fadeIn"
       style="z-index:100;font-size: 1.2em; color: #D93742; width: 200px; height: fit-content; position:absolute; display:none;font-family: 'Open Sans Condensed';">
        <span class="tooltiptable-content" style="display: inline-block;text-align: center;"><span
                class="tooltiptable-text" style="display: inline-block"><span class="tooltiptable-inner" style="background: rgba(85,61,61,0.95);
    color: white;height: 100%;display: inline-block"> If you require access to modules/programs, <br/> please contact to your system administrator </span></span></span>
        <span style=" content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 10px;
        border-style: solid;
        border-color: #D93742 transparent transparent transparent;"></span>
    </a>

My js:

 <script>
        $(document).ready(function () {

            $('th').mouseenter(function () {

                if ($(this).index() === 0) {
                    return;
                } else {

                    const top = $(this).offset().top - 110;
                    const left = $(this).offset().left;

                    $('#toolTipContainer').css({
                        'top': top, 'left': left, 'width': $(this).width(),
                    });
                    $('.tooltiptable-content').css({'width': $(this).width()});

                    $('#toolTipContainer').hide().fadeIn(500);
                }

            });

            $('th').mouseleave(function () {
                $("#toolTipContainer").fadeOut(500);
            });




        });

    </script>

You can see tooltip has been displayed correctly like below. enter image description here

But if i scroll table to the right and hover my mouse on those fields That mouse enter event didn't fired. And tooltip didn't show up.

enter image description here

I am wondering like document not ready at that time because of scrolling ? What can i do to solve this issue ? I examine duplicate questions but they didn't helped me to solve this.

Html Table Code :

    <div id="mainForm:sourcingDimensionSheet" name="mainForm:sourcingDimensionSheet" class="ui-handsontable ui-widget">
  <input id="mainForm:sourcingDimensionSheet_input" name="mainForm:sourcingDimensionSheet_input" type="hidden" value="">
  <input id="mainForm:sourcingDimensionSheet_focus" name="mainForm:sourcingDimensionSheet_focus" type="hidden" value="">
  <input id="mainForm:sourcingDimensionSheet_selection" name="mainForm:sourcingDimensionSheet_selection" type="hidden" value="[0,15,0,15]">
  <input id="mainForm:sourcingDimensionSheet_sortby" name="mainForm:sourcingDimensionSheet_sortby" type="hidden" value="-1">
  <input id="mainForm:sourcingDimensionSheet_sortorder" name="mainForm:sourcingDimensionSheet_sortorder" type="hidden" value="ascending">
  <div class="ui-datatable-header ui-widget-header ui-corner-top">
    <span id="mainForm:sourcingDimensionHeader">Materials</span>
  </div>
  <div id="mainForm:sourcingDimensionSheet_tbl" name="mainForm:sourcingDimensionSheet_tbl" class="handsontable-inner handsontable htRowHeaders htColumnHeaders" style="height: 516px; overflow: hidden;" data-initialstyle="height: 300px;" data-originalstyle="height: 516px; overflow: hidden;">
    <div class="ht_master handsontable" style="position: relative;">
      <div class="wtHolder" style="position: relative; width: 978px; height: 516px;">
        <div class="wtHider" style="width: 9050.1px; height: 126px;">
          <div class="wtSpreader" style="position: relative; top: 0px; left: 750.1px;">
            <table class="htCore">
              <thead>
                <tr>
                  <th class="" style="height: 81px;">
                    <div class="relative">
                      <span class="colHeader cornerHeader">&nbsp;</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Coverage Shape</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Packaging Type</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Backer /or Paraffin Wax added?</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Box Stacking Direction on Pallet</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Empty Pallet Height (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Pallet Cover Lid Included?</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Cover Lid Thickness (mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Coverage Tile Width (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Tip to Tip Tile Width (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Coverage Tile Length (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Tip to Tip Tile Length (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="ht__highlight">
                    <div class="relative">
                      <span class="colHeader">Tile Thickness (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Tile Thickness with Backer / Wax (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Coverage Tile Width (Imperial - in)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Coverage Tile Length (Imperial - in)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Tile Thickness (Imperial - in)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Stacking Direction in Box</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Rows in Box (Pieces per Tier)</span>
                    </div>
                  </th>
                 
                  
             
                  <td class="htDimmed  ui-datatable-even"></td>
                  <td class="htDimmed  ui-datatable-even"></td>
                  <td class="htAutocomplete  ui-datatable-even">
                    <div class="htAutocompleteArrow">▼</div>ANATOLIA BLOCK-1 | Anatolia Block-1-820 x 1120 mm
                  </td>
                  <td class="htRight htNumeric htDimmed  ui-datatable-even">3 k</td>
                </tr>
              </tbody>
            </table>
            <div class="htBorders">
              <div style="position: absolute; top: 0px; left: 0px;">
                <div class="wtBorder current" style="background-color: rgb(75, 137, 255); height: 2px; width: 200px; display: block; top: 82px; left: 2399px;"></div>
                <div class="wtBorder current" style="background-color: rgb(75, 137, 255); height: 43px; width: 2px; display: block; top: 82px; left: 2399px;"></div>
                <div class="wtBorder current" style="background-color: rgb(75, 137, 255); height: 2px; width: 200px; display: block; top: 124px; left: 2399px;"></div>
                <div class="wtBorder current" style="background-color: rgb(75, 137, 255); height: 44px; width: 2px; display: block; top: 82px; left: 2598px;"></div>
                <div class="wtBorder current corner" style="background-color: rgb(75, 137, 255); height: 6px; width: 6px; border: 1px solid rgb(255, 255, 255); display: none; top: 121px; left: 2595px;"></div>
              </div>
              <div style="position: absolute; top: 0px; left: 0px;">
                <div class="wtBorder fill" style="background-color: rgb(255, 0, 0); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder fill" style="background-color: rgb(255, 0, 0); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder fill" style="background-color: rgb(255, 0, 0); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder fill" style="background-color: rgb(255, 0, 0); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder fill corner" style="background-color: rgb(255, 0, 0); height: 6px; width: 6px; border: 1px solid rgb(255, 255, 255); display: none;"></div>
              </div>
              <div style="position: absolute; top: 0px; left: 0px;">
                <div class="wtBorder area" style="background-color: rgb(75, 137, 255); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder area" style="background-color: rgb(75, 137, 255); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder area" style="background-color: rgb(75, 137, 255); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder area" style="background-color: rgb(75, 137, 255); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder area corner" style="background-color: rgb(75, 137, 255); height: 6px; width: 6px; border: 1px solid rgb(255, 255, 255); display: none;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ht_clone_top handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; width: 978px; height: 86px;">
      <div class="wtHolder" style="position: relative; width: 978px; height: 111px;">
        <div class="wtHider" style="width: 9050.1px;">
          <div class="wtSpreader" style="position: relative; left: 750.1px;">
            <table class="htCore">
              <colgroup>
                <col class="rowHeader" style="width: 50px;">
                <col style="width: 250px;">
                <col style="width: 250px;">
                <col style="width: 250px;">
                <col style="width: 250px;">
                <col style="width: 200px;">
                <col style="width: 150px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 250px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 250px;">
                <col style="width: 200px;">
              </colgroup>
              <thead>
                <tr>
                  <th class="" style="height: 81px;">
                    <div class="relative">
                      <span class="colHeader cornerHeader">&nbsp;</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Coverage Shape</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Packaging Type</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Backer /or Paraffin Wax added?</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Box Stacking Direction on Pallet</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Empty Pallet Height (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Pallet Cover Lid Included?</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Cover Lid Thickness (mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Coverage Tile Width (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Tip to Tip Tile Width (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Coverage Tile Length (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Tip to Tip Tile Length (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="ht__highlight">
                    <div class="relative">
                      <span class="colHeader">Tile Thickness (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Tile Thickness with Backer / Wax (Metric - mm)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Coverage Tile Width (Imperial - in)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Coverage Tile Length (Imperial - in)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Tile Thickness (Imperial - in)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Stacking Direction in Box</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Rows in Box (Pieces per Tier)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Tiers in Box</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Common Width (Imperial - in)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Common Length (Imperial - in)</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Pallet Type</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Box Width (Metric - mm)</span>
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
            <div class="htBorders">
              <div style="position: absolute; top: 0px; left: 0px;">
                <div class="wtBorder current" style="background-color: rgb(75, 137, 255); height: 2px; width: 2px; display: none;"></div>
                <div class="wtBorder current" style="background-color: rgb(75, 137, 255); height: 2px; width: 2px; display: none;"></div>
                <div class="wtBorder current" style="background-color: rgb(75, 137, 255); height: 2px; width: 2px; display: none;"></div>
                <div class="wtBorder current" style="background-color: rgb(75, 137, 255); height: 2px; width: 2px; display: none;"></div>
                <div class="wtBorder current corner" style="background-color: rgb(75, 137, 255); height: 6px; width: 6px; border: 1px solid rgb(255, 255, 255); display: none;"></div>
              </div>
              <div style="position: absolute; top: 0px; left: 0px;">
                <div class="wtBorder fill" style="background-color: rgb(255, 0, 0); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder fill" style="background-color: rgb(255, 0, 0); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder fill" style="background-color: rgb(255, 0, 0); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder fill" style="background-color: rgb(255, 0, 0); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder fill corner" style="background-color: rgb(255, 0, 0); height: 6px; width: 6px; border: 1px solid rgb(255, 255, 255); display: none;"></div>
              </div>
              <div style="position: absolute; top: 0px; left: 0px;">
                <div class="wtBorder area" style="background-color: rgb(75, 137, 255); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder area" style="background-color: rgb(75, 137, 255); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder area" style="background-color: rgb(75, 137, 255); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder area" style="background-color: rgb(75, 137, 255); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder area corner" style="background-color: rgb(75, 137, 255); height: 6px; width: 6px; border: 1px solid rgb(255, 255, 255); display: none;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ht_clone_bottom handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; width: 978px; height: 82px;">
      <div class="wtHolder" style="position: relative; width: 978px; height: 107px;">
        <div class="wtHider" style="width: 9050.1px;">
          <div class="wtSpreader" style="position: relative;">
            <table class="htCore">
              <colgroup>
                <col class="rowHeader" style="width: 50px;">
                <col style="width: 250px;">
                <col style="width: 250px;">
                <col style="width: 250px;">
                <col style="width: 250px;">
                <col style="width: 200px;">
                <col style="width: 150px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 250px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 200px;">
                <col style="width: 250px;">
                <col style="width: 200px;">
              </colgroup>
              <thead>
                <tr></tr>
              </thead>
              <tbody></tbody>
            </table>
              <div style="position: absolute; top: 0px; left: 0px;">
                <div class="wtBorder fill" style="background-color: rgb(255, 0, 0); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder fill" style="background-color: rgb(255, 0, 0); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder fill" style="background-color: rgb(255, 0, 0); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder fill" style="background-color: rgb(255, 0, 0); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder fill corner" style="background-color: rgb(255, 0, 0); height: 6px; width: 6px; border: 1px solid rgb(255, 255, 255); display: none;"></div>
              </div>
              <div style="position: absolute; top: 0px; left: 0px;">
                <div class="wtBorder area" style="background-color: rgb(75, 137, 255); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder area" style="background-color: rgb(75, 137, 255); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder area" style="background-color: rgb(75, 137, 255); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder area" style="background-color: rgb(75, 137, 255); height: 1px; width: 1px; display: none;"></div>
                <div class="wtBorder area corner" style="background-color: rgb(75, 137, 255); height: 6px; width: 6px; border: 1px solid rgb(255, 255, 255); display: none;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ht_clone_left handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; height: 491px; width: 554px;">
      <div class="wtHolder" style="position: relative; height: 491px; width: 579px;">
        <div class="wtHider" style="height: 126px;">
          <div class="wtSpreader" style="position: relative; top: 0px;">
            <table class="htCore">
              <colgroup>
                <col class="rowHeader" style="width: 50px;">
                <col style="width: 0.1px;">
                <col style="width: 250px;">
                <col style="width: 250px;">
              </colgroup>
              <thead>
                <tr>
                  <th class="" style="height: 81px;">
                    <div class="relative">
                      <span class="colHeader cornerHeader">&nbsp;</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Id</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Material Number</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Material Description (Imperial)</span>
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th class="ht__highlight" style="height: 42px;">
                    <div class="relative">
                      <span class="rowHeader">1</span>
                    </div>
                  </th>
                  <td class="htDimmed  ui-datatable-even">20</td>
                  <td class="htDimmed  ui-datatable-even"></td>
                  <td class="htDimmed  ui-datatable-even">First_Item_EA_2</td>
                </tr>
              </tbody>
            </table>
          <div class="wtSpreader" style="position: relative;">
            <table class="htCore">
              <thead>
                <tr>
                  <th class="" style="height: 81px;">
                    <div class="relative">
                      <span class="colHeader cornerHeader">&nbsp;</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Id</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Material Number</span>
                    </div>
                  </th>
                  <th class="">
                    <div class="relative">
                      <span class="colHeader">Material Description (Imperial)</span>
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
         
</div>
Samet Dağ
  • 93
  • 6
  • you always place the tooltip all the way to the left of the th? I guess the tooltip is displayed out of your scroll area. – cloned Feb 15 '23 at 07:50
  • @cloned nope as you can see on image 1. All tooltips on top not left. Also i checked your meaning too but it doesn't even fire mouse enter event. I mean its not displaying any tooltip in the background because mouseenter event not fired. – Samet Dağ Feb 15 '23 at 07:53
  • Please add also the HTML for the table so we can reproduce your issue. Best would be if you can create a snippet in your code – cloned Feb 15 '23 at 08:10
  • @cloned I added whole Html table code. – Samet Dağ Feb 15 '23 at 08:19
  • Your code indicates that you are using [HandsonTable](https://handsontable.com/docs/javascript-data-grid/) which already has table header tooltips built-in. – Yogi Feb 15 '23 at 08:46
  • @Yogi Maybe solid HandsonTable has that option. But im not use HandsonTable directly. Im using Primefaces Sheet Extension which uses that. But i dont have any option like built-in header tooltips . I have to create by myself – Samet Dağ Feb 15 '23 at 08:53
  • The best would be to provide a snippet of this problem. – Neha Soni Feb 15 '23 at 08:56
  • This previous [PrimeFaces question](https://stackoverflow.com/a/21237686/943435) seems to show how to add tooltips to a table. And this is done server side within the jsp page. – Yogi Feb 15 '23 at 09:35

1 Answers1

0

@Samet

We have an example of implementing header tooltips with the scrolling event. I hope it will be helpful in your case: https://jsfiddle.net/aszymanski/oq2ymsr3/

JS

   const hot = new Handsontable(example, {
    afterOnCellMouseOver: function(e, coords, TD) {
      if (coords.row < 0) {
        tooltip.style.visibility = 'visible';
        tooltip.innerHTML = `header for columns index <b>${coords.col}</b>`;
        tooltip.style.position = 'absolute';
        tooltip.style.top = '0px';
        tooltip.style.padding = '5px';
        tooltip.style.left = `${TD.getBoundingClientRect().x}px`;
      }
    },
  });

CSS

.tooltip {
  height: 30px;
  color: grey;
  background: #fff;
  border: 2px solid #dedede;
  line-height: 30px;
  margin: 0 10px;
  box-shadow: 2px 2px 5px #ddd;
  z-index: 200;
}
ASzymanski
  • 101
  • 2