如何直接在HTML标签上应用CSS？解决hover文本响应式问题

原生的title属性没法通过标签内的style属性修改样式——因为它是浏览器自带的提示框，完全由浏览器控制，不受自定义样式影响。要实现带响应式的长内容hover提示，你可以用嵌套元素+inline脚本的方式，不用依赖外部样式类，全部在当前标签内搞定：

<span style="position: relative; cursor: pointer;" onmouseover="this.querySelector('.tooltip').style.display='block'" onmouseout="this.querySelector('.tooltip').style.display='none'">
  Hover this text to see the result.
  <span class="tooltip" style="display: none; position: absolute; bottom: 120%; left: 0; background: #333; color: #fff; padding: 8px; max-width: 280px; word-wrap: break-word; border-radius: 4px; z-index: 999;">
    这里放你的长提示内容，比如一段很长的说明文字，当屏幕宽度不足时，提示框会自动限制最大宽度，内容自动换行，不会超出屏幕范围，完全适配各种屏幕大小
  </span>
</span>

关键细节： #

• 父元素设position: relative，作为提示框的定位基准
• 提示框默认display: none，通过onmouseover/onmouseout脚本控制显示/隐藏（inline样式不支持:hover伪类，用脚本替代）
• 给提示框加max-width和word-wrap: break-word，确保内容过长时自动换行，实现响应式
• z-index: 999保证提示框不会被其他元素遮挡

内容的提问来源于stack exchange，提问作者NickH