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);
.<form action="script.php" method="post"> ... </form>
#id { width: 100px; word-wrap: break-word; }
var tutorials = ["php", "html", "css", "flash"]; tutorials.sort(); alert(tutorials[0]); // css
$code =[10=>"Perl", 20=>"PHP", 21=>"Python", 30=>"JavaScript"); $last = end($code); echo $last; // JavaScript