如何强制图像工具提示显示在其他工具提示之上?

I have a CSS Image Tooltip that when hover it will display another big image tooltip.

我有一个CSS图像工具提示，当鼠标悬停时，它会显示另一个大图像工具提示。

Now, when i hover and i have another tooltip (small) image near the tooltip, i get that result:

现在，当我鼠标悬停，在工具提示附近有另一个工具提示(小)图像时，我得到了这样的结果:

As you can see, the big tooltip is display under the second tooltip (small) image.

如您所见，大工具提示显示在第二个工具提示(小)图像下。

I want to force it to display above that small tooltip.

我想强制它显示在小工具提示上方。

Here is the HTML code:

这里是HTML代码:

.maptt {
  margin-left: 350px;
  text-align: center;
  margin-top: 97px;
  z-index: 200;
  position: absolute;
}
.mapttlish {
  margin-left: 450px;
  text-align: center;
  margin-top: 197px;
  z-index: 200;
  position: absolute;
}
/* NewTooltip */

a.tooltip1 {
  outline: none;
}
a.tooltip1 strong {
  line-height: 30px;
}
a.tooltip1:hover {
  text-decoration: none;
}
a.tooltip1 span {
  z-index: 10;
  display: none;
  padding: 14px 20px;
  margin-top: -30px;
  margin-left: 28px;
  width: 300px;
  line-height: 16px;
}
a.tooltip1:hover span {
  display: inline;
  position: absolute;
  color: #111;
  border: 1px solid #DCA;
  background: #fffAF0;
}
.callout {
  z-index: 20;
  position: absolute;
  top: 30px;
  border: 0;
  left: -12px;
}
/*CSS3 extras*/

a.tooltip1 span {
  border-radius: 4px;
  box-shadow: 5px 5px 8px #CCC;
}

<div class="maptt">

  <!-- tooltip1-->
  <a href="#" class="tooltip1">
    <img src="http://coreneto.com/delete/hover.png" />
    <span>
        <img class="callout" />
        <img src="http://coreneto.com/delete/hover-big.png" style="float:right;" /><strong style="font-size:16px;">First</strong>
    </span>
  </a>
</div>

<div class="mapttlish">

  <!-- tooltip2-->
  <a href="#" class="tooltip1">
    <img src="http://coreneto.com/delete/hover.png" />
    <span>
        <img class="callout" />
        <img src="http://coreneto.com/delete/hover-big.png" style="float:right;" /><strong style="font-size:16px;">Second</strong>
    </span>
  </a>
</div>

Here is a live one: JSfiddle

这里有一个活生生的例子:JSfiddle

1 个解决方案

#1

This looks like a z-index issue. Add the right z-index to a.tooltip1:hover span and give z-index auto to .maptt:

这看起来像是一个z指数问题。将右边的z指数加到a。tooltip1:悬停跨度，将z-index自动赋给。maptt:

a.tooltip1 span,
a.tooltip1:hover span {
  z-index: 9999;
}
.maptt {
  z-index: auto;
}

Preview

预览

Fiddle: https://jsfiddle.net/zogbs35w/

小提琴:https://jsfiddle.net/zogbs35w/

#1