CODEWITHSUNDEEP
htmlcsshtml-tablehover
Alihamra
Alihamra

Reputation: 484

HTML CSS Show Text box on hovering

What I'm looking for is that when I hover over an image or text it will automatically shows a box that contains a text related to that image. As follows:

CSS :

.owners{
    width:500px;
    height:300px;
    border:0px solid #ff9d2a;
    margin:auto;
    float:left;

}
    span.own1{
        background:#F8F8F8;
        border: 5px solid #DFDFDF;
        color: #717171;
        font-size: 13px;
        height: 250px;
        width:310px;
        letter-spacing: 1px;
        line-height: 20px;
        position:absolute;
        text-align: center;
        text-transform: uppercase;
        top: auto;
        left:auto;
        display:none;
        padding:0 0px;


    }

    p.own{
        margin:0px;
        float:left;
        position:relative;
        cursor:pointer;
    }

    p.own:hover span{
        display:block;
    }

HTML :

<div class="owners">

<table width="100%" height="100%" align="center" border="1">
   <tr><td width="%" valign="top">
<p class="own"><img src="images/avater.jpg" width="100" height="100" />
<br />
<font style="font-size:15px;">Employee Name</font><span class="own1">some text here should be shown here</span></p>
</td></tr>
   <tr><td width="%" valign="top">
<p class="own"><img src="images/avater.jpg" width="100" height="100" />
<br />
<font style="font-size:15px;">Employee Name</font><span class="own1">some text here should be shown here</span></p>
</td></tr>
</table>

</div>

The output for the above codes is a table that contains list of employee images and their names. So when I hover the mouse on top of them, a box shows that contains the text related to it BUT they are shown behind the images and names, by that I mean I am looking to make this box stand in front of the images not behind them. I hope this makes sense! I've tried changing position:absolute and position:fixed but none works as needed!

You can check this also : http://jsfiddle.net/g1o8vyqd/

Upvotes: 1

Views: 20458

Answers (4)

Patrick Hamil
Patrick Hamil

Reputation: 29

Alihamra, It sounds like you are looking for a tooltip. I would recommend cleaning up your code like the previous answers/comments outlined and then trying to utilize something like this: http://www.menucool.com/tooltip/css-tooltip.

Thanks

Upvotes: 0

Todd Mark
Todd Mark

Reputation: 1885

JSFiddle

Just add the code and you should confirm there is no z-index higher than your hover element.

z-index:9;

to:

 p.own:hover span{
        display:block;
        z-index:9;
    }

Upvotes: 2

Mooseman
Mooseman

Reputation: 18891

Use z-index:1 to raise the element above the rest:

p.own:hover span {
    display:block;
    z-index:1
}

Fiddle: http://jsfiddle.net/g1o8vyqd/3/

Note, also, that your markup is not very good: besides the fact that table is being used incorrectly (it's for tabular data), you are using the font tag, which is obsolete. (In fact, it was deprecated in HTML 4)

Upvotes: 1

SierraOscar
SierraOscar

Reputation: 17637

Do you mean something like this?

p.own{
    margin:0px;
    float:left;
    position:relative;
    cursor:pointer;
    opacity: 0;
}

p.own:hover span{
    display:block;
    opacity: 1;
    z-index: 99;
}

Upvotes: 0

Related Questions