添加工具提示：图像后

Question

对于标有label课程的help，我想在data-info属性中添加图片和工具提示，例如示例：

＆＃13;

＆＃13;

/*Image after label*/
.help:after {
  content: url('http://goo.gl/vTV35T');
}

/*'data-help' after label*/
.help1:after {
  content: attr(data-help);
}
:after {
  margin-left: 5px;
  font-style: italic;
}

＆＃13;

<h5>Label with image after: </h5>
<label class="help" data-help="some info">some label</label>

<h5>Label with text after: </h5>
<label class="help1" data-help="some info">some label</label>

<h5>What I need is a label, after it an image, 
having a tooltip from "data-help" attribute: </h5>
"some label
<img src='http://goo.gl/vTV35T' title='some info' />"

＆＃13;

＆＃13;

＆＃13;

我需要的是：

所有没有使用额外的img代码，但仅使用＆＃34;标签＆＃34;。

NB

请运行代码段以更好地理解问题。

Answer 1

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

＆＃13;

＆＃13;

.help {
  display: inline-block; /* Make it a block */
  position: relative; /* Make it the containg block of ::before */
  pointer-events: none; /* Disable :hover */
}
.help:after {
  content: url('http://goo.gl/vTV35T');
  pointer-events: auto; /* Enable :hover */
  margin-left: 5px;
}
.help:hover:before {
  content: attr(data-help); /* Toooltip */
  position: absolute; /* Out of flow */
  left: 100%; /* At the end */
  bottom: 0; /* At the end */
  color: #000;
  background: #ffffe1;
  border: 1px solid;
  white-space: nowrap;
  font-family: sans-serif;
  font-size: 11px;
  padding: 2px;
  box-shadow: 2px 2px 2px #999;
}

＆＃13;

<h5>Fake tooltip:</h5>
<label class="help" data-help="some info">some label</label>

<h5>Real tooltip:</h5>
some label
<img src='http://goo.gl/vTV35T' title='some info' />

＆＃13;

＆＃13;

＆＃13;

Answer 2

这最接近你想要的：

＆＃13;

＆＃13;

.help:after {
    content: url(http://www.outblush.com/i/help_question_mark.gif);
}
.help:before {
    position:relative;
    content:attr(data-help);
    border: 2px solid black;
    background-color: yellow;
    opacity:0;
    top: 2em;
    left: 8em;
    transition: opacity 0.5s;
}
.help:hover:before {
    opacity: 1;
}

＆＃13;

 <label class="help" data-help="some info">Some label</label>

＆＃13;

＆＃13;

＆＃13;

主要的缺点是您必须为tooptip指定top和left。这是另一种选择：

＆＃13;

＆＃13;

.help:after {
    content: url(http://www.outblush.com/i/help_question_mark.gif);
}

＆＃13;

 <label class="help" title="some info">Some label</label>

＆＃13;

＆＃13;

＆＃13;

Answer 3

有

<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 + "' />");
});