javascript - 工具提示不根据窗口大小进行调整

Question

我正在使用 Tipped 工具提示插件..因为我之前使用过一个插件是 ace admin 插件 和 Tipped 但问题它不会根据窗口大小调整位置。在免费提示版本中，某些功能不存在。我遇到的主要问题是我在加载时设置了工具提示，在检查条件后我尝试更改它，但它显示了两个工具提示

代码:

var a=document.createElement('a');
a.setAttribute('id','23_34');
a.setAttribute('title', 'Transcription ID: ');  

 if (data == true) {
Tipped.remove("#23_45");
Tipped.create("#23_45", $('<p/>').html('Transcription ID:
}

它显示两个工具提示都没有删除第一个..有人有解决方案或建议我任何根据窗口高度自动调整其位置的工具提示吗？

Answer 1

如果您不想使用任何工具提示插件而只想使用CSS，那么这个答案可能会有所帮助。

HTML:

<a href="" class="tooltip_custom" data-title="text on hover"></a>

CSS:

.tooltip_custom{
    display: inline;
    position: relative;
}
.tooltip_custom:hover:after{ 
    background: #333; 
    background: rgba(0,0,0,.9); 
    border-radius: 5px; bottom: 26px; 
    color: #fff; font-size: 12.2px; 
    content: attr(data-title); 
    left: 113%; 
    bottom:-30%; 
    padding: 4px 7px; 
    position: absolute; 
    z-index: 500000000; 
    width: auto; 
} 
.tooltip_custom:hover:before{ 
    border: solid; 
    border-color: #333 transparent; 
    border-width: 6px 6px 0 6px; 
    bottom: 5px; 
    transform:rotate(90deg); 
    left: 100%; content: ""; 
    position: absolute; 
    z-index: 5000000001; }