Making text box using css and html

[Apparatus17]

I was wondering how to have something like an information box fad in or out depending if the object is hovered over i would like to use html and css to do this as apposed to the Js methods I’ve seen only because it seems too lengthy for what I’m doing the page I’ve created is at
My page

[Paulie_D]

Do you mean like a tooltip?

I agree that a table is ideal here but I’m not really a fan of the structure inside

<td class="transition">
    <sup>&nbsp;25</sup>
    <br>Mn<br>
    <p>Manganese</p>
</td>

[Apparatus17]

Almost like a tool tip but almost like and alt where when u hover a text box describing that element appears and have it do it where it positions it depending on the area of the screen that the element is in so that it wont get cut off. also, have a some what translucent affect as where u can see the information in the box but still see part of the text and other elements below. The structure in the td’s is needed to have the elements look as if they are elements but how else would u suggest to create them?

[Paulie_D]

The structure in the td’s is needed to have the elements look as if they are elements

Not sure what that means but ideally you should have three (divs & spans / paragrapfs would work) and not using break tags for spacing…that’s what margins & padding are for.

<td class="transition">
    <p class"number">25</p>
    <p class="shortcode">Mn</p>
    <p class="element-name">Manganese</p>
</td>

Then you just style each class as required.

positions it depending on the area of the screen that the element is in so that it wont get cut off.

That’s certainly possible but detecting the edge of the screen is something you need javascript for.

How much text are you anticipating?

[Apparatus17]

Ah OK i figured it out and a tool tip did do what i need but my only problem now is that the elements after group 9 need to be displayed to the left of the element block as apposed to the right as the current are because when you get to He(helium) it expands into the pare of the page making it impossible to see without scrolling right which id rather the user not have to do.
Here’s the current part that creates the too tip

a.tooltip /*------------------------------applied to nonmetals*/
        {
            outline:none; 
        }
        a.tooltip strong 
        {
            line-height:30px;
        }
        a.tooltip:hover 
        {
            text-decoration:none;
        }

a.tooltip span 
{
    display:none;
    line-height:16px;
    margin-left:28px;
    margin-top:-30px;
    padding:14px 20px;
    width:450px; 
    z-index:10;
}
a.tooltip:hover span
{ 
    background:#228C24; 
    border:1px solid #000000;
    color:#111;
    display: inline;
    position: absolute;
}
    /*CSS3 extras*/
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #707062;
}/*---------------------------------------------------------end of nonmetals-*/

and that is just for one of the element groups what changes the actual position of the tip is

a.tooltip span 
        {
            display:none;
            line-height:16px;
            margin-left:28px;
            margin-top:-30px;
            padding:14px 20px;
            width:450px; 
            z-index:10;
        }

specifically the margin-left which i thought by just changing the left to right would work…it does not

[Author]

Posts