工具提示箭头（解释器）似乎位于与对齐工具提示图标不同的位置

Question

我无法将工具提示与社交对齐 icon.You 可以在 link 上看到：

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;
}

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

工具提示箭头（解释器）似乎位于与对齐工具提示图标不同的位置

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

css

tooltip