首先我检查了下面所有的重复项。但是我仍然不知道如何。make animation hover like transition hoverJS hover-like animationHover animation with js not working我的问题是我有

<a class="tooltip animated fadeIn" href="#" style="margin-left: 30px; font-size: 1.6em; font-family: 'Open Sans Condensed'; -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */ animation-delay: 1s; ">
                <i class="fa fa-info helper" ></i>  
                <span class="tooltip-content"><span class="tooltip-text"><span class="tooltip-inner"> If you require access to programs, <br /> please contact to your system administrator </span></span></span>
            </a>

我可以使用hoover功能与css如下

@import url(http://fonts.googleapis.com/css?family=Satisfy);
.tooltip {
    display: inline;
    position: relative;
    z-index: 999;
    font-size: 1.2em;
    color: #D93742;
}

/* Gap filler */
.tooltip::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: 100%;
    left: 50%;
    pointer-events: none;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.tooltip:hover::after {
    pointer-events: auto;
}

/* Tooltip */

.tooltip-content {
    position: absolute;
    z-index: 9999;
    width: 400px;
    left: 50%;
    bottom: 100%;
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
    font-weight: 400;
    color: #D93742; /* #fffaf0; */
    background: transparent;
    opacity: 0;
    margin: 0 0 5px -200px;
    cursor: default;
    pointer-events: none;
    font-family: inherit; /* 'Satisfy', cursive; */
    -webkit-font-smoothing: antialiased;
    -webkit-transition: opacity 0.3s 0.3s;
    transition: opacity 0.3s 0.3s;
}

.tooltip:hover .tooltip-content {
    opacity: 1;
    pointer-events: auto;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.tooltip-content span {
    display: block;
}

.tooltip-text {
    border-bottom: 10px solid #D93742;  /* #fffaf0; */
    overflow: hidden;
    -webkit-transform: scale3d(0,1,1);
    transform: scale3d(0,1,1);
    -webkit-transition: -webkit-transform 0.3s 0.3s;
    transition: transform 0.3s 0.3s;
}

.tooltip:hover .tooltip-text {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

.tooltip-inner {
    background: rgba(85,61,61,0.95);
    padding: 5px;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
    webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    color: white;
}

.tooltip:hover .tooltip-inner {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* Arrow */

.tooltip-content::after {
    content: '';
    bottom: -20px;
    left: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-top-color: #D93742; /* #fffaf0; */
    border-width: 10px;
    margin-left: -10px;
}

我想做同样的事情与javascript鼠标悬停（鼠标悬停）和鼠标弹出。首先我的div不能显示。我有一个表格，它有像'th'这样的标题。如果用户悬停在标题上，我想用我的javascript闭包显示工具提示，就像css方式一样。Css代码只在某些位置打开。但我的js工具提示必须为特定的表格标题打开。我可以用js显示工具提示，但是我不能添加动画功能和css的变化。我该怎么做呢？

<div id="toolTipContainer"
   style="z-index:100;  font-size: 1.2em; color: #D93742; border-style: solid; border-width: 2px; width: 200px; height: 80px; position:absolute; display:none;">
    <span class="tooltiptable-content"><span class="tooltiptable-text"><span class="tooltiptable-inner"> If you require access to modules, <br/> please contact to your system administrator </span></span></span>
</div>

我的剧本：

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

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

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

                    const top = $(this).offset().top - 82;
                    //   var left = $(this).offset().left;
                    const left = $(this).offset().left;

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

                    //show tool tips
                    $('#toolTipContainer').show();
                }

            });

            $('th').mouseout(function () {
                $("#toolTipContainer").hide();
            });

            $('#toolTipContainer').mouseover(function () {
                $('#toolTipContainer').show();
            });

            $('#toolTipContainer').mouseout(function () {
                $('#toolTipContainer').hide();
            });

        });

    </script>