The code snippet presented in this page shows you how to create an animated tooltip effect using HTML attributes, CSS pseudo-elements, animation and content properties.
Here is the code.
<style>
@keyframes anim_tlt {
0% {
bottom:50%;
font-size: 1px;
right: 95%;
}
100% {
bottom: 100%;
font-size: 17px;
right: 2%;
}
}
.tlt_ex {
background: #abcdef;
display: inline-block;
making: 0 4px;
position: relative;
padding: 20px 1px;
text-align: center;
width: 130px;
}
.tlt_ex:hover:before {
animation-name: anim_tlt;
animation-duration: 1.2s;
background: #fcb0b0;
border-radius: 6px;
bottom: 100%;
color: #0000d0;
content: attr(data-titl);
font-size: 17px;
margin: 0;
padding: 0 2px 1px 2px;
position: absolute;
right: 2%;
}
</style>
<h4>Example Animated Tooltip with HTML and CSS</h4>
<p>Position the mouse over the blue rectangle</p>
<div class='tlt_ex' data-titl='Hello to Me'>Tooltip with CSS.</div>
<div class='tlt_ex' data-titl='Peace is Good'>Have a Good Life.</div>
<div class='tlt_ex' data-titl='We are happy'>I am Happines.</div>
data-titl attribute contains the text for tooltip, but you can use any other attribute, for example the "title", in this case use: content: attr(title);.<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net