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);
.<p>Web development courses: <em>CoursesWeb.net</em></p>
h3 { padding: 2px 0.2em; }
// gets first Div with class="cls", and shows its content var elm = document.querySelector("div.cls"); alert(elm.innerHTML);
if(isset($_POST["field"])) { echo $_POST["field"]; }