Tooltip arrow(explainer) seems on different places from align tooltip icon - css

Question

I cant align tooltip with social icon.You can see on the link:
http://www.themeforest-deneme2.deniz-tasarim.site/2020/01/22/vffd/
(on left sidebar, bottom social icon which is facebook)
the related code:
<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>
you can delete unnecessary letter that nearly social icon because when i delete them, arrow seem on different place.

Answer 1

To fix this you can first remove that extra, unwanted text and <p> tag from around the facebook icon and then change this css declaration so the margin-top is -36px like this:
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -36px;
margin-left: 15px;
z-index: 999;
}
I tested it in the browser tools and it worked well. That's not to say that there are not better ways to do this, but this, in my opinion answers your question and gets you moving forward.