WEBDOOD.COM

Archive for March, 2011

CSS3 Tooltip Trick using CSS3 :before psuedo element, content attribute and custom data attributes

by webdood on Mar.03, 2011, under CSS3, Software Development

I was looking for a way to make an HTMLElement’s title appear faster in a WebKit application.

Turns out there is a way to capture the “title” attribute of an element using the :before pseudo element and content property, store that value in a div that only appears onhover over the original element. The problem with this technique was that the actual “title” attribute would eventually display.

Therefore, I made use of another CSS3 feature called “custom data attributes” and, rather than storing the title of the element in the “title” attribute, I used “data-title” instead.

Here is a quick example:

<!DOCTYPE html>
<head>
  <style type="text/css">
    .sprocket { position:relative;width:50px;height:50px;background-color:red; }
    .sprocket:before { content:attr(data-title); display:none; }
    .sprocket:hover::before{ width:160px; display:block; border-radius:3px; background-color:#fffdc7; padding:5px; color:black; margin-top:40px; margin-left:20px; -webkit-box-shadow: 3px 3px 3px rgba(193,193,193,.5);}
    .sprocket:hover{ z-index:10; position:absolute; }
  </style>
</head>
<body>
  <div class="sprocket" data-title="Fancy Title Text">
</body>
</html>

Click here for an Example

Shannon Norrell

Leave a Comment :, , , more...

Canvas Progress Spinner

by webdood on Mar.01, 2011, under Some Examples

This dynamically-generated HTML5 Canvas Spinner will resize to it’s container. It is very clean, scales to any size and works against any background color. If you are one to use the typical “spinner” gif89a image, you will know that it does not work against colored backgrounds due to dithering issues around the edges of the blades within the image and there are only so many sizes available to “borrow” from the internet.

This HTML5 <CANVAS> tag-based spinner is scalable and works against ny background color:

Leave a Comment :, , , , more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...

  • A List Apart
  • Dive into HTML5
  • Javascript: The Good Parts
  • QuirksMode.org