Question

I found a cool css “tooltip” script that works perfectly for my site, but it’s been made to work when someone hovers over an href.

I have very limited CSS skills, especially with positioning. So, this may help me out, depending on how I can explain what I need to do.

Below is the and tag , that currently works when you hover your mouse.

<style type="text/css">
    .tooltip {
        border-bottom: 1px dotted #000000; color: #000000; outline: none;
        cursor: help; text-decoration: none;
        position: relative;
    }
    .tooltip span {
        margin-left: -999em;
        position: absolute;
    }
    .tooltip:hover span {
        border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
        font-family: Calibri, Tahoma, Geneva, sans-serif;
        position: absolute; left: 1em; top: 2em; z-index: 99;
        margin-left: 0; width: 250px;
    }
    .tooltip:hover img {
        border: 0; margin: -10px 0 0 -55px;
        float: left; position: absolute;
    }
    .tooltip:hover em {
        font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
        display: block; padding: 0.2em 0 0.6em 0;
    }
    .custom { padding: 0.5em 0.8em 0.8em 2em; }
    * html a:hover { background: transparent; }
    .warning { background: #FFFFAA; border: 1px solid #FFAD33; }
</style>


<table style="width:100%;">
  <tr>
    <td>
      <a class="tooltip" href="#">Warning<span class="custom warning">
      <img src="/images/tooltip/warning.png" alt="Warning" height="48" width="48" />
      <em>Warning</em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!</span>
     </a>
    </td>
  </tr>
</table>

You’ll see I have an image too. It’s a simple yellow exclamation hazard sign. But it settles nicely to the left of the tooltip box.

I’m now trying to use this same tooltip (rounded edges and all), without the hover.
In other words, I liked it so much I want to place it on my web page, maybe in the header, on the right side, and have it as a static thing.

After playing with the styles, I have basically come to the conclusion I need help with positioning.

You’ll see .tooltip span { margin-left: -999em; position: absolute; }
This has been a primary problem with me. I figured if I took out the margin-left it would simply show the tooltip, without needing the :hover to display. Alas, it eludes me!

How can I simply “delete” the , and just show the tooltip, as is, without needing the hover?

Answer 1

Edit
I felt like being nice, and i’m bored. So here it is again with fixed top right positioning. I also changed the class names (tooltip just seems like it will probably be used for something else)

Fixed Positioning

Ok, so I have stripped out everything you don’t need (from a glance)

See Here

HTML

<div class="tooltip" href="#"><span class="custom warning">
    <img src="/images/tooltip/warning.png" alt="Warning" height="48" width="48" />
    <em>Warning</em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!</span>
</div>

CSS

.tooltip {
    cursor: help;
    position: relative;
}
.tooltip span {
    border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    font-family: Calibri, Tahoma, Geneva, sans-serif;
    position: absolute; left: 1em; top: 2em; z-index: 99;
    margin-left: 0; width: 250px;
}
.tooltip img {
    border: 0; margin: -10px 0 0 -55px;
    float: left; position: absolute;
}
.tooltip em {
    font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
    display: block; padding: 0.2em 0 0.6em 0;
}
.custom { padding: 0.5em 0.8em 0.8em 2em; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }