Add hint: after image
For the label
marked with help
I would like to add an image and tooltip from an attribute data-info
like in the example:
/*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;
}
<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' />"
What I need is below:
This is all without using an additional tag img
, but only a "label".
NB
Please run the snippet to better understand the question.
source to share
having
<div class="field" data-help="this is a help tooltip text">
<label for="myField">Description</label>
<input id="myField" type="text"/>
</div>
Finally resolved with 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 + "' />");
});
source to share
This is the closest I could get:
.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;
}
<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' />
source to share
This is the closest thing to what you want:
.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;
}
<label class="help" data-help="some info">Some label</label>
The main drawback is that you have to specify top
and left
to tooptip. Here's another option:
.help:after {
content: url(http://www.outblush.com/i/help_question_mark.gif);
}
<label class="help" title="some info">Some label</label>
source to share