我无法将工具提示与社交图标对齐。您可以在链接上看到:
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>
您可以删除几乎是社交图标的不必要字母,因为当我删除它们时,箭头似乎出现在不同的地方。
答案 0 :(得分:0)
要解决此问题,您可以先从Facebook图标周围删除多余的不需要的文本和<p>
标签,然后更改此css声明,使margin-top
为-36px
,如下所示:< / p>
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -36px;
margin-left: 15px;
z-index: 999;
}
我在浏览器工具中对其进行了测试,并且效果很好。这并不是说没有更好的方法可以做到这一点,但是我认为这可以回答您的问题并让您前进。