Стрелка всплывающей подсказки (объяснитель) появляется в разных местах значка выравнивания всплывающей подсказки

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

Чтобы исправить это, вы можете сначала удалить этот лишний, нежелательный текст и тег <p> вокруг значка Facebook, а затем изменить это объявление 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;
}

Я протестировал его в инструментах браузера, и он работал хорошо. Это не значит, что не существует лучших способов сделать это, но это, по моему мнению, отвечает на ваш вопрос и заставляет вас двигаться вперед.