Css Course

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.

@keyframes anim_tlt {
 0% {
 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%;

<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

Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Animated Tooltip with HTML and CSS

Last accessed pages

  1. innerHTML in PHP (12128)
  2. SHA256 Encrypt hash in JavaScript (18173)
  3. Simple Admin Login PHP Script (8218)
  4. Node.js Move and Copy Directory (11717)
  5. Send E-mail with HTML tags and Attachment (4131)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (527)
  2. PHP Unzipper - Extract Zip, Rar Archives (427)
  3. SHA256 Encrypt hash in JavaScript (410)
  4. Read Excel file data in PHP - PhpExcelReader (364)
  5. Create simple Website with PHP (338)