CSS 图片上的工具提示

Question

我是创建网页的初学者，如果有一个简单的 CSS 图像工具提示示例 Html5 标准，我将不胜感激。我知道有一些例子，但它们对我来说有点难。

Answer 1

这可能是利用元素的原生 title 属性的最简单的工具提示：

<style>
    p[title]:hover:after {
        content: attr(title);
        padding: 10px;
        background-color: white;
        position: absolute;  
    }
</style>

<p title="I am a tooltip!">Hover over me</p>