Question

我在overflow:hidden上有一个div，其中包含工具提示，但这个隐藏在div之外。工具提示会在图像悬停时显示，并跟随鼠标的移动。

此处指向页面的链接：http://tmp.thomasdesnoyers.com/works/

HTML

<div class="tooltipbloc" style="margin-top:<?php the_sub_field('top_gauche'); ?>%">

  <a id="tooltip" data-tooltip="<p style=font-
size:24px;font-family:founders_grotesk;margin-bottom:0px;text-
transform:uppercase><?php the_title(); ?></p>"
href="<?php the_permalink(); ?>">

  <div class="img-container">
     <div class="hover-thumb background-thumb"></div>
     <?php the_post_thumbnail( 'full' ); ?>
  </div> 

  </a>
</div>

CSS

.tooltipbloc{
   position:relative;
   overflow: hidden;
}

JS

var moveTooltip = false,
  $tooltip = $("<div/>", {
    appendTo: "body",
    id: "tooltip",
    css: {
      position:"absolute",
      display:"none",
      width:500,
      textAlign:"center",
      padding:10,
      color:"black",
      fontSize:24,
    }
  });

Answer 1

我提出了一个有效的工具提示：将鼠标悬停在“文字”上

<link href="https://firebasestorage.googleapis.com/v0/b/tooltipcss.appspot.com/o/tooltip.css?alt=media&token=0ce443aa-0970-4167-8d7d-7abdcd2edf71" rel="stylesheet">
<span class="info">Text<span class="tooltip">MSG</span></span>

溢出隐藏不在工具提示上工作

1 个答案: