HTML元素悬停时显示自定义属性值：两种实现方法

<p id="IP08">
    Uneven development is, precisely that: capitalist
    factors (firms, industries, countries) have a common trait, but
    <span title="capitalist factors (firms, industries, countries)">they</span> show uneven unfolding and cannot be individually
    predicted. Since the factors are mutually and interdependently
    related, the general trend that we define as the law of uneven
    development can be inferred from <span title="capitalist factors
    (firms, industries, countries)">their</span> relationship, which
    has a specific connotation, i.e., the difference in the paces of
    the factors that make up the relationship itself. Since the general
    trend is determined by capitalism’s nature, <span title="the general
    trend">it</span> cannot change without changing the nature of
    capitalism itself.
</p>

<p id="IP08">Uneven development is, precisely that: capitalist
factors (firms, industries, countries) have a common trait, but
<span ref="capitalist factors (firms, industries, countries)">
they</span> show uneven unfolding and cannot be individually
predicted. Since the factors are mutually and interdependently
related, the general trend that we define as the law of uneven
development can be inferred from <span ref="capitalist factors
(firms, industries, countries)">their</span> relationship, which
has a specific connotation, i.e., the difference in the paces of
the factors that make up the relationship itself. Since the general
trend is determined by capitalism’s nature, <span ref="the general
trend">it</span> cannot change without changing the nature of
capitalism itself.</p>

/* 为带有 ref 属性的 span 元素设置相对定位，这是伪元素定位的基础 */
span[ref] {
    position: relative;
    /* 可选：为了视觉效果，可以添加下划线或不同颜色来指示可交互 */
    /* text-decoration: underline dotted; */
    /* cursor: help; */
}

/* 默认状态下隐藏工具提示 */
span[ref]:after {
    content: attr(ref); /* 获取并显示 ref 属性的值 */
    background-color: #00adb5; /* 背景色 */
    color: #fff; /* 文字颜色 */
    position: absolute; /* 绝对定位 */
    padding: 1px 5px 2px 5px; /* 内边距 */
    top: 100%; /* 定位在 span 元素的下方 */
    left: 0px; /* 从 span 元素的左侧开始 */
    white-space: nowrap; /* 防止文本换行 */
    opacity: 0; /* 默认透明度为0，隐藏 */
    box-shadow: 3px 3px 5px #00ADB5; /* 阴影效果 */
    border: 1px solid rgb(197, 195, 195); /* 边框 */
    border-radius: 0 5px 0 5px; /* 圆角 */
    visibility: hidden; /* 默认不可见 */
    z-index: 20; /* 确保工具提示在其他内容之上 */
    transition: all 0.1s ease .5s; /* 添加过渡效果，延迟0.5秒显示 */
}

/* 鼠标悬停时显示工具提示 */
span[ref]:hover:after {
    opacity: 1; /* 透明度变为1，显示 */
    visibility: visible; /* 可见 */
    /* 可以添加动画效果，如下面的 @keyframes grow */
    /* animation: grow 3s forwards; */
}

/* 这是一个可选的动画，用于工具提示的出现和消失效果 */
@keyframes grow {
    0% {
        transform: scale(0);
    }
    30%, 65% {
        transform: scale(1);
    }
    70%, 100% {
        transform: scale(0);
    }
}

<p id="IP08">Uneven development is, precisely that: capitalist
factors (firms, industries, countries) have a common trait, but
<span data-ref="capitalist factors (firms, industries, countries)">
they</span> show uneven unfolding and cannot be individually
predicted. Since the factors are mutually and interdependently
related, the general trend that we define as the law of uneven
development can be inferred from <span data-ref="capitalist factors
(firms, industries, countries)">their</span> relationship, which
has a specific connotation, i.e., the difference in the paces of
the factors that make up the relationship itself. Since the general
trend is determined by capitalism’s nature, <span data-ref="the general
trend">it</span> cannot change without changing the nature of
capitalism itself.</p>

span[data-ref] { /* 选择器改为 data-ref */
    position: relative;
}

span[data-ref]:after { /* content: attr() 也改为 data-ref */
    content: attr(data-ref);
    /* ... 其他样式不变 ... */
}

span[data-ref]:hover:after {
    /* ... 样式不变 ... */
}