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);
.<dl> <dt>HTML</dt> <dd> - Hyper Text Markup Language</dd> <dd> - Language for web pages</dd> </dl>
#id { visibility: hidden; }
document.getElementById("id").onclick = function(){ alert("http://CoursesWeb.net/"); }
if(isset($_REQUEST["id"])) { echo $_REQUEST["id"]; }