Hidding /在点击和悬停时为同一div显示两个不同的工具提示

Question

我有一个锚标记，点击它后，我将显示一个工具提示。同样在悬停它时，我将展示一个不同的工具提示。这里的问题是，当我尝试单击并将鼠标放在div上时，我得到两个工具提示。有没有办法用CSS或js修复它？

html：

<a href="#" class="infoTip showtooltip" tabindex="0" alt="Current Risk Levels" ng-click="mytoolTip()" data-toggle="tooltip" data-placement="top"> 
    <span class="infoIconTip">My info</span>

的CSS：

.showtooltip:hover .infoIconTip, .showtooltip:active .infoIconTip {
    visibility: visible;
}

.showtooltip .infoIconTip {
    visibility: hidden;
    width: auto;
    color: #fff;
    text-align: center;
    padding: 18px;
    position: absolute;
    z-index: 1000;
}

我正在使用jQuery显示数据切换工具提示：

mytoolTip = function(event) {
    $(event.currentTarget).parent().find('[data-toggle="popover"]').popover('toggle');
    myservice.tiggerTooltip();
};

我尝试使用hide() jQuery函数隐藏“infoIcontip”，并在点击它时使用.css（'visibility'，'hidden'）。但是，当我再次悬停时没有运气我无法获得悬停工具提示。