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 tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Animated Tooltip with HTML and CSS

Last accessed pages

  1. Select in MySQL, Output results in HTML Table (11207)
  2. CSS Course - Free lessons (10629)
  3. Other Free Courses (2012)
  4. Node.js Move and Copy Directory (6821)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (100936)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2419)
  2. Contact page - CoursesWeb (2320)
  3. Tabs effect with CSS (2308)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (909)
  5. PHP getElementById and getElementsByTagName (859)