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>
- The 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);.

• Demo (position the mouse over the blue rectangles):
Tooltip with CSS.
Have a Good Life.
I am Happines.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
Animated Tooltip with HTML and CSS

Last accessed pages

  1. Functions, Variable scope and Passing by Reference (1719)
  2. PHP MySQL - WHERE and LIKE (22892)
  3. Add data from form in text file in JSON format (12220)
  4. Convert JSON in JavaScript (6083)
  5. PHP Code Snippets (5682)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (153)
  2. Node.js Move and Copy file (96)
  3. Register and show online users and visitors (93)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (78)
  5. HTML Course - Free Lessons (69)