工具提示箭头(解释器)似乎与对齐工具提示图标不同

Question

>我无法将工具提示与社交图标对齐。您可以在链接上看到：

http://www.themeforest-deneme2.deniz-tasarim.site/2020/01/22/vffd/

(在左侧边栏上，底部社交图标是Facebook(

相关代码：

<div class="col-sm-1 " >50%
<?php global $post; ?>
<style>
.logo-img2{
border: 1px solid #d0d0ff;padding:20px; margin-top: 0px; margin-bottom: 0px;
}
</style>
<style>
.col-sm-1 .sticky-top { top: 60px;}
</style>
<div class="sticky-top ">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink($post->ID);?>">
<div>
<img  src="<?php echo get_template_directory_uri(); ?>/img/icons/facebook.png" alt="Logo" class="logo-img2"">
</div>
</a>
<a href="https://twitter.com/share?url=<?php echo get_permalink($post->ID);?>">
<div>
<img  src="<?php echo get_template_directory_uri(); ?>/img/icons/twitter.png" alt="Logo" class="logo-img2"">
</div>
</a>
<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">
<div>
<img  src="<?php echo get_template_directory_uri(); ?>/img/icons/pinterest.png" alt="Logo" class="logo-img2" >
</div>
</a>
<style>
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
box-shadow: 0px 0px 10px #800000;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
</style>
<a class="tooltips" href="#">vdsf
<img  src="<?php echo get_template_directory_uri(); ?>/img/icons/facebook.png" alt="Logo" class="logo-img2"">
<p>a</p>
<span>Tooltip</span></a>
</div>
</div>

您可以删除几乎是社交图标的不必要的字母，因为当我删除它们时，箭头似乎位于不同的地方。

Answer 1

要解决此问题，您可以首先从 facebook 图标周围删除多余的、不需要的文本和<p>标签，然后更改此 css 声明，以便margin-top像这样-36px：

a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -36px;
margin-left: 15px;
z-index: 999;
}

我在浏览器工具中对其进行了测试，效果很好。这并不是说没有更好的方法来做到这一点，但在我看来，这可以回答你的问题并让你前进。