Question

我的自定义工具提示不会与我悬停的相应元素一起移动。相反，它固定在页面上的一个位置。工具提示的内容对于相应的元素是正确的，但其位置只是静态的。有人可以建议吗？

PHP：

 $arrayAuthors = explode(',', $authorString);
for($i=0; $i<count($arrayAuthors); $i++){
    $authors .= '<div id="author_'.$i.'" class="authorWrap" onmouseover="pub.showInvite(\'wraptip_'.$i.'\')" onmouseout="pub.unshowInvite(\'wraptip_'.$i.'\')">'.$arrayAuthors[$i].'</div>

                 <div id="wraptip_'.$i.'" class="outerWrap">
                    <div class="innerWarap">
                        <p class="personAuth">Invite '.$arrayAuthors[$i].' to club</p>
                        <p><button class="inviteBtn">Invite</button></p>
                    </div>
                 </div>
    ';
}

我的CSS：

 .authorWrap{
 position: relative;
float: left;
margin-right: 20px;
padding-left: 10px;
padding-right: 10px;
background-color: #F0F0F0;
font-size: 13px;
margin: 10px;
 }

 .outerWrap{
display: none;
width: 100px;
padding: 5px;
color: #fff;    
background: #535663;
text-decoration: none;
font-size: 11px;
position: absolute;
border-radius: 6px;
top: 20px;
left: -10px;
 }

MY JS：

 pub.showInvite =function(idOfDiv){
var divInvite = document.getElementById(idOfDiv);
divInvite.style.display = 'block';
 }

 // UNSHOW INVITE - ONMOUSEOUT
 pub.unshowInvite = function(idOfDiv){
 var divInvite = document.getElementById(idOfDiv);
 divInvite.style.display = 'none';
 }

Answer 1

这很简单;）您必须更改position: absolute; - 这就是为什么您的工具提示始终位于同一位置 - 请使用position: relative;或其他内容。

但如果它导致定位其他元素的问题，有几种方法可以保护您的布局免受破坏。

我认为最简单的方法是将工具提示放在相应的元素中，而不是你能够坚持position: absolute;（但父元素不能是postion: static;）

此外，使用JavaScript，您可以从父元素获取位置并将其显示（可能需要一些计算）到您的工具提示中 - 但这种方法要复杂得多。

我的自定义工具提示是否与我悬停的相应元素一起移动？

1 个答案: