CODEWITHSUNDEEP
htmlcsspopup
Mark Martin
Mark Martin

Reputation: 1

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

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.

Upvotes: 0

Views: 40752

Answers (4)

Tone Škoda
Tone Škoda

Reputation: 1523

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>

Upvotes: 4

thirdender
thirdender

Reputation: 3951

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.

Upvotes: 1

Rakesh Vadnal
Rakesh Vadnal

Reputation: 985

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;
}

Upvotes: 1

eteich
eteich

Reputation: 537

<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;
}

Upvotes: 0

Related Questions