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 attribute specifies the HTTP method (GET, POST) used to submit the form-data?
action method value
<form action="script.php" method="post"> ... </form>
Which CSS property allows to add shadow to boxes?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Which function removes the first element from an array?
pop() push() shift()
var fruits = ["apple", "apricot", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicate the function that can be used to check if a PHP extension is instaled.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO is available."
Animated Tooltip with HTML and CSS

Last accessed pages

  1. Integer and Float value in Select with PDO from string to numeric (6497)
  2. Register and show online users and visitors (32557)
  3. Display data from PHP Array, or MySQL in HTML table (18918)
  4. Contact page - CoursesWeb (46062)
  5. Tabs effect with CSS (46648)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (488)
  2. Contact page - CoursesWeb (474)
  3. Tabs effect with CSS (474)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (172)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (99)