tooltip

HTML5, CSS3 and JavaScript Experiments and Insight Website

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am pleased to announce that I’ve just finished my latest endeavour – HTML5, CSS3 and JavaScript Experiments and Insight, and most of the code samples and demos from my blog have been moved there in and new and convenient code-listing and demo form. From now on, each new blog post will be accompanied by a dedicated page on that website on which my readers will be able to have a look at the code, run the example and eventually download it.

Enjoy HTML5, CSS3 and JavaScript Experiments and Insight and have a great rest of the week!

Advertisements

Loving my CSS3 Babies

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am not a huge fan of roundups, but this morning, I found that I have a few pretty popular CSS3 posts and decided to put them in a single post which will be updated whenever a new one appears and is worth seeing.

How to Create a Fully Functional CSS3-only Treeview

css-3-treeview

How to Create a Fully Functional CSS3-only Tabstrip without a Single Line of JavaScript

css3-tabstrip

How to Create Semantically Correct Imageless Custom Checkboxes and Radiobuttons with CSS3

css-pages-imageless-css3-custom-checkboxes-and-radio-buttons

How to Style HTML Dropdowns with CSS3

selectbox

Creating Crossbrowser CSS3 and SVG Reflections

css3-element-reflections

How to Create iPhone Toggle Buttons with CSS3

iPhone

How to Achieve Gaussian Blur Effect with CSS3

gaussian-02

CSS3 Driven Slides Viewer Without any JavaScript

Just check this amazing presentation here.

How to Create Fancy Animated Tooltips without any JavaScript

Download CSS3 Tooltip

How to Crop Background Sprite with CSS3

css3-background-image-cropping

Fancy CSS3 Tooltips (Yeah, without any JavaScript)

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Here’s a cool code snippet just before the weekend – purely CSS3-driven tooltips. The code below is pretty self-explanatory, so just a few clarifications.

The motivation to use both visibility: hidden and opacity: o – I did it in order to prevent pointer events that will display the tooltip before the mouse actually starts hovering the element. The 50ms delay of the transition is there in order to circumvent and make the animation possible after applying visibility: visible. Finally – currently, the only browser that can play consistent transitions in Firefox, so the other browsers will display the tooltip without the fancy animation. If you like the solution, you can check the demo maybe follow me on Twitter for more cool stuff.

The CSS:

/* apply to elements, containing a data-title attribute */
[data-title] {
    position: relative;
    padding: 0;
}

[data-title]::before,
[data-title]::after {
    position: absolute;
    left: 50%;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    background: #000;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .8);

    -moz-transition: opacity 200ms 50ms linear;
    -webkit-transition: opacity 200ms 50ms linear;
    -ms-transition: opacity 200ms 50ms linear;
    -o-transition: opacity 200ms 50ms linear;
    transition: opacity 200ms 50ms linear;
}

[data-title]:hover::before,
[data-title]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* the tooltip */
[data-title]::before {
    content: attr(data-title);
    width: 120px;
    padding: 4px;
    margin: 30px 0 0 -68px;
    font: normal 11px/16px Arial, Sans-serif;
    color: #fff;
    cursor: default;
    border-radius: 4px;
}

/* the pointer */
[data-title]::after {
    content: "";
    width: 8px;
    height: 8px;
    margin: 26px 0 0 -6px;

    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Usage… It’s Easy:

Just apply data-attrbiute with some text to the elements that should display the tooltip, for example:

<ul>
    <li><a href="http://stickeez.wemakesites.net" target="_blank" data-title="Sticky notes app using the new HTML5 File API, blob and local storage">Sticky Notes App</a></li>
    <li><a href="http://image2base64.wemakesites.net" data-title="Image to Base64 Converter Using the new HTML5 File API">Image to Base-64 Data-URI Converter</a></li>
    <li><a href="http://hasher.wemakesites.net/" data-title="Hasher uses 40+ encryption algorithms to create encrypted message digests online">Message Digest Encrypter</a></li>
</ul>

That’s it! Enjoy the weekend!

Related Posts:

New Web 2.0 Tooltip Component

If you are tired and bored of browsers’ default tooltips and look for an easy way to display important information in a stylish manner Tooltip.JS is a component that you will love.

It is skinnable, fully customizable and can display not only the text found in the title attribute in the elements of your markup, but also rich HTML enhanced with JavaScript and CSS or load its contents from external sources via AJAX.

Key Features:

  • Extremely fast with a small footprint.
  • Imageless CSS3 skins.
  • Support for minimize zones.
  • Tooltips operate on the title attribute of the elements or can be loaded via AJAX.
  • You can specify regions on the page that will be tooltipified or just tootipify the entire page.
  • Skinnable – the full version includes the full set of 12 skins that will virtually fit any design.
  • Platform-independent – can work with any server platform.
  • Can be initialized either on page load or on demand.
  • Crossbrowser – All major browsers are supported.
  • Comprehensible and easy to use client API.
  • Tooltipifying of newly added elements on the age after AJAX or user interaction.
  • Tooltips can contain HTML and JavaScript, not just simple text.
  • Smart flipping when the tooltip is beyond the viewport.

You can visit the demo page or download the component straight away from this link. It is also included in the latest version of Acid.JS Web 2.0 Component Library.