html - 图像上的 CSS 工具提示困惑

Question

为什么在 .tooltip:hover span 中使用 display:relative 后这段文字乱七八糟？我想让我的页面与 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/