всплывающая подсказка показывает элемент td для тега привязки

Question

У меня есть требование показывать процент кликов для каждой ссылки, доступной в HTML
шаблон, который получен из базы данных динамически. Я попытался отобразить клик на процентах для каждой привязки, добавляя их к data-title с помощью jQuery, но Проблема заключается в том, что я наводил подсказку ссылки на выходе. Может ли кому-то помочь, чтобы показать всплывающую подсказку только тогда, когда я нахожусь на якоре якорь
link? или, пожалуйста, дайте мне лучшее решение. Я приложил все примеры кода ниже ссылки на скрипач. Найдите образец скрипки и кода.

JSFiddle

$(document).ready(function() { 
 
    var anchors = []; 
 
    $(this).find("a").each(function() { 
 
    anchors.push($(this)); 
 
    }); 
 

 
    for (i = 0; i < anchors.length; i++) { 
 
    var _ele = '100%' 
 
    $(anchors[i]).attr('data-title', _ele); 
 
    } 
 
});

a { 
 
    color: #900; 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    color: red; 
 
    position: relative; 
 
} 
 
a[data-title]:hover:before { 
 
    width: 55px; 
 
    content: attr(data-title); 
 
    padding: 4px 8px; 
 
    color: #333; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 100%; 
 
    white-space: nowrap; 
 
    z-index: 20px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
    -moz-box-shadow: 0px 0px 4px #222; 
 
    -webkit-box-shadow: 0px 0px 4px #222; 
 
    box-shadow: 0px 0px 4px #222; 
 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
 
    background-image: -webkit-gradient(linear, left top, left bottom, color- stop(0, #eeeeee), color-stop(1, #cccccc)); 
 
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 
 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
 
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 
 
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="1024" align="center" cellpadding="0" cellspacing="0" border="0" class="wrapper"> 
 
    <tbody> 
 
    <tr> 
 
     <td width="1024" class="wrapper"> 
 
     <table width="25%" align="left" cellpadding="0" cellspacing="0" border="0" class="series"> 
 
      <tbody> 
 
      <tr> 
 
       <td align="center"> 
 
       <a target="_blank" class="editorLinks tooltip" style="color: #000000; text-decoration: none;"> 
 
        <div> 
 
        <img src="../../car_2series.jpg" width="90" height="44" alt="2 Series" border="0" style="display: block;"> 
 
        </div> 
 
        <h3 style="margin: 15px 0 45px; margin-top: 15px; margin-bottom: 45px; color: #030000; 
 
            font-family: Helvetica,Arial,sans-serif; font-size: 0.9em;"> 
 
            Car A</h3> 
 
       </a> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 

 
     <table width="25%" align="left" cellpadding="0" cellspacing="0" border="0" class="series"> 
 
      <tbody> 
 
      <tr> 
 
       <td align="center"> 
 
       <a target="_blank" class="editorLinks tooltip" style="color: #000000; text-decoration: none;"> 
 
        <div> 
 
        <img src="../../../feb2015/car_4series.jpg" width="90" height="44" alt="4 Series" border="0" style="display: block;"> 
 
        </div> 
 
        <h3 style="margin: 15px 0 45px; margin-top: 15px; margin-bottom: 45px; color: #030000; 
 
            font-family: Helvetica,Arial,sans-serif; font-size: 0.9em;"> 
 
            Car B</h3> 
 
       </a> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 

 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table width="1024" align="center" cellpadding="0" cellspacing="0" border="0" class="wrapper"> 
 
    <tbody> 
 
    <tr> 
 
     <td width="1024" class="wrapper"> 
 
     <table width="25%" align="left" cellpadding="0" cellspacing="0" border="0" class="series"> 
 
      <tbody> 
 
      <tr> 
 
       <td align="center"> 
 
       <a target="_blank" class="editorLinks tooltip" style="color: #000000; text-decoration: none;"> 
 
        <div> 
 
        <img src="../../car_6series.jpg" width="90" height="44" alt="6 Series" border="0" style="display: block;"> 
 
        </div> 
 
        <h3 style="margin: 15px 0 45px; margin-top: 15px; margin-bottom: 45px; color: #030000; 
 
            font-family: Helvetica,Arial,sans-serif; font-size: 0.9em;"> 
 
            Car B</h3> 
 
       </a> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     <table width="25%" align="left" cellpadding="0" cellspacing="0" border="0" class="series"> 
 
      <tbody> 
 
      <tr> 
 
       <td align="center"> 
 
       <a target="_blank" class="editorLinks tooltip" style="color: #000000; text-decoration: none;" data-title="1/100%"> 
 
        <div> 
 
        <img src="../../../car_7series.jpg" width="90" height="44" alt="7 Series" border="0" style="display: block;"> 
 
        </div> 
 
        <h3 style="margin: 15px 0 45px; margin-top: 15px; margin-bottom: 45px; color: #030000; 
 
            font-family: Helvetica,Arial,sans-serif; font-size: 0.9em;"> 
 
            7 Series</h3> 
 
       </a> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 

 

 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

Установить его :after, чтобы убедиться, что это г-индекс всегда больше, чем его родителей. использовать абсолютное позиционирование внутри относительного родительского управление положением

https://jsfiddle.net/Panomosh/6ywncLh3/3/