Html 将工具提示添加到：后图像

对于标有

帮助

类的

标签

，我想从

数据信息

属性添加图像和工具提示，如示例中所示：

标签后的图像*/ .帮助：以后{ 内容：url（'http://goo.gl/vTV35T'); } /*标签后面的“数据帮助”*/ .1：以后{ 内容：attr（数据帮助）； } ：之后{ 左边距：5px； 字体：斜体； }

标签后面带有图像：
一些标签
在以下内容后添加文本标签：
一些标签
我需要的是一个标签，后面是一个图像，
具有来自“数据帮助”属性的工具提示：
“一些标签
“

这与您想要的最接近：

.help:之后{
内容：网址(http://www.outblush.com/i/help_question_mark.gif);
}
.帮助：以前{
位置：相对位置；
内容：attr（数据帮助）；
边框：2件纯黑；
背景颜色：黄色；
不透明度：0；
顶部：2米；
左：8em；
过渡：不透明度0.5s；
}
。帮助：悬停：之前{
不透明度：1；
}

---

一些标签

这是我能得到的最接近的标签：

.help{
显示：内联块；/*使其成为块*/
位置：relative；/*使其成为：：before的包含块*/
指针事件：无；/*禁用：悬停*/
}
.帮助：以后{
内容：url（'http://goo.gl/vTV35T');
指针事件：自动；/*启用：悬停*/
左边距：5px；
}
。帮助：悬停：之前{
内容：attr（数据帮助）；/*Toooltip*/
位置：绝对；/*流出*/
左：100%；/*结尾处*/
底部：0；结尾处为/**/
颜色：#000；
背景:#ffffe1；
边框：1px实心；
空白：nowrap；
字体系列：无衬线；
字体大小：11px；
填充：2px；
盒影：2px 2px 2px#999；
}

假工具提示：
一些标签
真实工具提示：
一些标签

具有

<div class="field" data-help="this is a help tooltip text">
    <label for="myField">Description</label>
    <input id="myField" type="text"/>
</div>

描述

最终通过jQuery解决：

$('.field[data-help]')
.each(function () {
    var help = ($(this).attr('data-help'));
    $(this).children('input')
    .after("<img class='help' src='/img/help.gif' title='" + help + "' />");
});

$（'.field[数据帮助]）
.每个（功能）{
var help=（$（this.attr（'data-help'））；
$（this.children（'input'））
.在（“”）之后；
});

是的，您可以在

内容

属性中使用url图像。它是完全有效的，并且可能与不可能的url图像重复。工具提示是html的东西，而不是css的东西。@Oriol这就是为什么我在stackoferflow上问这个问题。请看这里：好的，我会给它一个快照这里有一些信息：MDN信息和你想要的关键区别是图像。您希望始终在选择器之后的中包含内容，并在悬停时编辑部分内容。据我所知，这是不可能的，因为你不能有两个

：在
之后或
：在
之前。实际上，最好的方法是将所有内容都放在HTML中，只使用CSS控制显示内容和显示内容。问题是文本长度。。。“一些标签lksdflkjs dlkfj lkjsdflk jsdlfkgj fljh”也许一些jquery可以帮上忙？