datatables, jquery, animate, z-index

Question

Я использую HTML-таблицу на своей странице, которая строит таблицы данных и фиксированные столбцы. Я добавил подсказки в строки, которые строятся с помощью animate, и попытался использовать z-index в animate, но когда мои советы коснулись, чтобы исправить столбцы, они перекрываются.

Это jquery "всплывающая подсказка"

  $('span.jQtooltip').each(function() {
    var el = $(this);
    var title = el.attr('title');
    if (title && title != '') {
      el.attr('title', '').append('<div>' + title + '</div>');
      var width = el.find('div').width();
      var height = el.find('div').height();
      el.hover(
        function() {
          el.find('div')
            .clearQueue()
            .delay(200)
            .css('z-index', 999)
            .animate(
                {width: width + 20, height: height + 20}, 200, function () {
                $(this).css('z-index', 9999)
            }
            ).show(200)
            .animate({width: width, height: height}, 200);
        },
        function() {
          el.find('div')
            .css('z-index', 999)
            .animate({width: width + 20, height: height + 20}, 150)
            .animate({width: 'hide', height: 'hide'}, 150);
        }
      ).mouseleave(function() {
        if (el.children().is(':hidden')) el.find('div').clearQueue();
      });
    }
  })

CSS CSS

.jQtooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted;
}
.jQtooltip div {
  display: none;
  position: absolute;
  bottom: -1px;
  left: -1px;
  z-index: 99999;
  width: 190px;
  padding: 8px 12px;
  text-align: left;
  font-size: 12px;
  line-height: 16px;
  color: #000;
  box-shadow: 0 1px 3px #C4C4C4;
  border: 1px solid #DBB779;
  background: #FFF6BD;
  border-radius: 2px;
  height: auto !important;
  width: auto !important
}