CSS / HTML only popup solution for hover over link, to contain text, links and images

Question

What I want is perhaps too simple, and I'm a bit overwhelmed by the responses I find!

***I'd prefer a pure CSS/HTML solution as I don't use javascript.***

What I'm doing at the moment is to use the TITLE attribute within an anchor tag to display information about the link (see: http://www.helpdesk.net.au/index_safety_driver.html and mouseover some of the links).

What I'd like to do is to have something a bit more flexible and interesting for that content and so I'm looking at floating a DIV over a link on hover instead of TITLE (can I leave TITLE in in case the DIV isn't supported - as a failsafe?).

I like the concept at http://www.barelyfitz.com/screencast/html-training/css/positioning/ but would like to have the option of an image in the top left corner.

Answer 1

Here is my updated jsfiddle. Using general css classes which you can reuse and with fade effect and with mouse out delay. The first two css classes are what you need in your code, rest is just for example.

http://jsfiddle.net/ctJ3d/8/

.popupBox {
    visibility:hidden;
    opacity:0;        
    transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    transition: all 0.4s ease;
    transition-delay:  1s;

}
.popupHoverElement:hover > .popupBox {
    visibility:visible;
    opacity:1;
    transition: all 0.3s ease;
    transition-delay:  0s;        
}       

#button {
    background:#FFF;
    position:relative;
    width:100px;
    height:30px;
    line-height:27px;
    display:block;
    border:1px solid #dadada;
    margin:15px 0 0 10px;
    text-align:center;
}
#two {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DADADA;
    color: #333333;
    overflow:hidden;
    left: 0;
    line-height: 20px;
    position: absolute;
    top: 30px;
}

<div id="button" class="popupHoverElement">
    <h3>hover</h3>

    <div id="two" class="popupBox">Hovered content</div>
</div>

Answer 2

I tried to achieve whatever I understood from your question. Check the fiddle here: http://jsfiddle.net/rakesh_vadnal/RKxZj/1/

HTML:

<div id="button"><h3>button</h3>
<div id="two">Hovered content</div>
</div>

CSS:

#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
width:98px;
height: 0;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#button:hover > #two {
display:block;
left:0px;
height:100px;
}

Answer 3

There is a tutorial called Sexy Tooltips with Just CSS that might be exactly what you're looking for. There are two things to watch for:

1. This solution requires that your tooltip be in your HTML markup, instead of reading from the title attribute directly. In a semantic approach to HTML, this strikes me as the wrong approach. Using CSS3, it's possible to utilize the title attribute as the value of the content property for a psuedo-element. However, without using Javascript to cancel the default tooltip, both tooltips will appear (see this demo jsfiddle). A much lengthier discussion of this technique, its implementation and issues, can be found at CSS3 Only Tooltips and Stack Overflow: How to change the style of Title attribute inside the anchor tag?
2. If you are still providing support for older browsers, be aware the IE7 will not obey the :hover selector for anything but A tags. If you need the tooltips to appear in IE7 for any element but an A tag, you'll need to use Javascript to add/remove a class from the element on hover and style using that class.

Answer 4

<div id="one"><h3>hover over me</h3>
    <div id="two">Hovered content</div>
</div>

#one {
    background:#443322;
    position:relative;
    width:100px;
    height:30px;
    display:block;
    color:#FFFFFF;
}
#two {
    background:#223344;
    position:absolute;
    width:100px;
    height:100px;
    display:none;
    color:#FFFFFF;
}
#one:hover #two {
    display:block;
    left:100px;
}