Catatan harian, artikel, cerita, kisah, rekaman, pemikiran, ide atau apa saja yang bisa disimpan untuk digunakan dikemudian hari.

Banner 468

Featured entries

Cara membuat Tooltip menggunakan CSS

Posted by Unknown on - -

CSS Tooltips - Floating HTML Elements

 

TooltipsA small floating box that appears when you mouse over a link
This tooltip is created using just a few lines of CSS!
are those li'l tip boxes that show up when you place your mouse over a link, or piece of text. This article shows how to create these tooltips with only CSS. Yes, no javascript.

The <a> html element (link) allow you to define a tooltip, that shows up when you mousever the link, using the title attribute. However, this tooltip cannot be styled, and is "ugly", so we will create our own with just CSS.

Example of a link with title attribute set

Link

Example of a CSS Tooltip

LinkThis is the CSS tooltip showing up when you mouse over the link
Now doesnt that look much better?

What are floating boxes that make tooltips?

One of the things I used to wonder for a while, before getting into CSS, is: what are those floating boxes that create tooltips, or show floating banners and the like?
Well, they are just ordinary HTML Elements!
Why then do they float above the rest of the HTML Elements on the page?
They have been styled to do so, either with CSS or using the style attribute.

Example of a simple floating HTML Element

To float an element, for example a DIV, all you need to do is add the following two styles:

  • position:absolute;
  • z-index:100;
<div class="floater">I am a floating div</div>
 
<style>
<!--
div.floater {
        position: absolute;
        z-index: 100;
}
-->
</style>

The above floats a 'div' Element by making it's position, absolute and brining it to the front of the screen with the style, z-index.

<div class="floater" style="position:absolute;z-indez:100;">I am a floating div</div>

The above floats a DIV by defining the style, position:absolute and z-index:100 in the html attributes.

The position attribute defines how the html element is positioned with respect to the other html elements in the document.
Position attribute values can be: relative, absolute or fixed to name a few.
Absolute, positions the element absolutely to the screen (or a parent element if the parent is positioned relatively). The position of the element is defined using the style attributes: top and left.
top, is the offset from the top of the screen.
left, is the offset from the left of the screen.

The z-index attribute defines the depth of the element. The smaller the z-index, the further back the element is on the screen. ie: an element with z-index:100; will float above an element with z-index: 50;

Creating a tooltip with CSS and html

Knowing how to float an element, we can create a tooltip with just plain CSS and no JavaScript.

First lets create a format for writing tooltips into our HTML document.

<a href="#">
        Tooltip Link
        <span>Tooltip Popup Description</span>
</a>

Since our tooltips will show when putting yoru mouse over a link, we place it right in the link using the SPAN element.

What we will do, is use CSS to:

  • Hide the SPAN elements within our links, <a> tags
  • Make the link position relative, so that we can place absolutely positioned elements relative to the link
  • show the SPAN element in the link when we hover over the link
  • Position the SPAN absolutely relative to the link
a span {
        display: none;
}
a:hover {
        position: relative;
}
a:hover span {
        display: block;
        position: absolute;
}
a:hover span {
        top: 10px; left: 0;
}

The full code for CSS based Floating Tips

I Love <a href="#">CSS<span>Cascading Style Sheets</span></a>. 
They allow me to create these nice hovering tips.
 
<style type="text/css">
<!--
 
a:hover {
        position: relative;
}
 
a span {
        display: none;
}
 
a:hover span {
        display: block;
        position: absolute; top: 10px; left: 0;
}
 
-->
</style>

Pretty simple huh?
The above does not include formatting. Heres the code with the link and tip styled, I'm don't have the best eye but you get the idea.

I Love <a href="#">CSS<span>Cascading Style Sheets</span></a>. 
They allow me to create these nice hovering tips.
 
<style type="text/css">
<!--
 
a {
        border-bottom: 1px dashed brown;
        text-decoration: none;
}
 
a:hover {
        position: relative;
 }
 
a span {
        display: none;
}
 
a:hover span {
        display: block;
        position: absolute; top: 10px; left: 0;
        /* formatting only styles */
        padding: 5px; margin: 10px; z-index: 100;
        background: #f0f0f0; border: 1px dotted #c0c0c0;
        opacity: 0.9;
        /* end formatting */
}
 
-->
</style>

Advantages of a purely CSS Tooltip

If you have used javascript for your tooltips before, you will know that it uses quite a bit of code. First you have to create the tooltip dynamically, then assign the necessary style attributes via javascript to make it float, then find out just where on the page to place it by recursively going back through all the parent elements of the link, and finding their offset from the top and left of the page. wheew...
By the time you're done you have a huge blob of code that may not work on most browsers...
On the other hand, the CSS based tooltip does not require alot of code, is simpler to use and understand, and does not lag as some js tooltips do when calculating the position values.

JavaScript tooltips are also prone to errors in other javascript, not part of their code, triggering an error that stops instantiation of the javascript objects needed for the tooltip. So if you have one bad apple in your bag of jascript functions, the rest will suffer.

Disadvantages of a purely CSS Tooltip

One disadvantage of the CSS tooltips is the syntax of your markup, related to Seach Engine Optimization.
Because we are placing <span> tags inside your anchor tags and hiding them, your links become a bit less specific to the context.
A js tooltip however, can use the title attribute, to place the text for the tooltip, while a css tooltip cannot use this attribute.

A solution could be to use just a small amount of javascript, to take the text out of the title attribute, and append it to the text inside the link (<a> tag)

<script type="text/javascript">
<!--
 
window.onload = function() {
        var links = document.links || document.getElementsByTagName('a');
        var n = links.length;
        for (var i = 0; i < n; i++) {
               if (links[i].title && links[i].title != '') {
                       // add the title to anchor innerhtml
                       links[i].innerHTML += '<span>'+links[i].title+'</span>'; 
                       links[i].title = ''; // remove the title
               }
        }
}
 
//-->
</script>

This allows you to use a syntax such as:

I Love <a href="#" title="Cascading Style Sheets" class="tip">CSS</a> 
and <a href="#" title="JavaScript" class="tip">JS</a>.  
They allow me to create these nice hovering tips.

This will show as:
I Love CSSCascading Style Sheets and JSJavaScript. They allow me to create these nice hovering tips.

In addition to being more search engine friendly, it also fallbacks to the normal link with the title attribute if either CSS or JavaScript is not available on the users browser.

Alternatives:

link title attribute: Link
abbreviation tag: abbr
Acronym tag: acronym
BlockQuote tag:

This is a quote

 

[ Read More ]

Merencanakan langkah menyambut masa depan

Posted by Unknown on - -

Rencana langkah sudah dilakukan, tinggal pelaksanaan.

To be continue..
[ Read More ]

    TEMPLATES AND HACKS