Animated Tooltip with HTML and CSS

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.

<<-Making Responsive IFRAMEs

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag renders as emphasized text, displaying the text oblique?

<p>Web development courses: <em>CoursesWeb.net</em></p>

Which CSS property defines the space between the element border and its content?

margin padding position

h3 {
  padding: 2px 0.2em;
}

Click on the method which returns the first element that matches a specified group of selectors.

getElementsByName() querySelector() querySelectorAll()

// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);

Indicate the PHP variable that contains data from a form sent with method="post".

$_SESSION $_GET $_POST

if(isset($_POST["field"])) {
  echo $_POST["field"];
}

Last accessed pages

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ^(137532)
Ajax-PHP Rating Stars Script ^(16724)
Ajax Voting Script - Vote Up Down ⁽⁸⁵¹²⁾
PHP Script Website Mini-Traffic ⁽⁷⁰⁷⁶⁾
Display image file in Canvas, Check its type and size before Upload ⁽³⁴³⁹⁾

Popular pages this month

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽²²¹⁾
Read Excel file data in PHP - PhpExcelReader ⁽⁸²⁾
PHP Unzipper - Extract Zip, Rar Archives ⁽⁷¹⁾
The Four Agreements ⁽⁶⁹⁾
The Mastery of Love ⁽⁵⁹⁾