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

是follow rules的问题，<br>标签导致的乱码。

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

.tooltip:hover span{
    display:inline;
}

如果将 span 元素更改为 block 元素，问题就解决了。

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

编辑： 更新了工作演示 http://jsfiddle.net/pau79oLv/

CSS 图片上的工具提示乱七八糟

CSS tooltip on image is messed

html

css

tooltip