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

Question

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

现在，当我悬停并且在工具提示附近有另一个工具提示（小）图像时，我得到了结果：

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

我想强制它显示 那个小工具提示。

以下是HTML代码：

psql: ERROR:  MD5 authentication is unsupported 
in replication and master-slave modes.
HINT:  check pg_hba.conf

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

以下是现场直播：JSfiddle

Answer 1

这看起来像z-index问题。将z-index添加到a.tooltip1:hover span并将z-index auto提交给.maptt：

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

预览

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