图像上的CSS工具提示是混乱的

Question

为什么在使用display:relative中的.tooltip:hover span后，此文字会混乱？我想让我的页面与svk.png相关。不固定的职位。

HTML

<figure>
     <img class="slovensko" src="svk.png" alt="mapa slovenska">
    </figure>
    <div>
    <p> <a class="tooltip" href="#">
    <img id="ZilPic" src="circle.png" alt="">
    <span id="ZilTool">text<br>
        texttexttexttext<sup>2</sup><br>
        texttexttexttexttext<br>
        texttexttexttexttexttext<br>
        texttexttexttexttext<br>
        texttexttexttexttext<br>
        texttexttexttexttexttext<br>    
    </span>
    </a></p>
  </div>

Answer 1

这是遵守规则的问题，而<br>标签会导致混乱。

.tooltip span {
    padding:14px 20px;
}

.tooltip:hover span{
    display:inline;
}

如果您将span更改为block元素，则问题已解决。

.tooltip:hover span{
    display:inline-block;
}

修改：更新了工作演示http://jsfiddle.net/pau79oLv/