Popout/expand links on mouseover without changing text/elements flow

Question

I'd like links to "pop out" of the page when hovering over them, without changing the position/flow of text/elements nearby.

See attached example shot. I'm pretty sure this is a simple position trick, but I'm having trouble getting it to work properly. I'd prefer this not to require any JS, if possible.

Any advice is much appreciated.

Answer 1

I think what you're after is a tooltip, here's a hugely simple CSS tooltip I use frequently that can be styled anyway you choose:

CSS:

    a:hover 
{
background:#ffffff; 
text-decoration:none;
} /*BG color is a must for IE6*/

    a.tooltip span 
{
display:none; 
padding:2px 3px; 
margin-left:8px; 
width:130px;
}
    a.tooltip:hover span
{
display:block; 
position:absolute; 
background:#ffffff; 
border:1px solid #cccccc; 
color:#6c6c6c;
}

HTML:

    Roll me <a class="tooltip" href="#">Tooltip<span>
Tooltip contents.
</span></a>.

If it messes with the flow of your other text, add a z-index.

Hope that helps you out :)

Answer 2

I would just clone that anchor link, modify the style to absolute and adapt the left/top value.

$('a').bind('mouseenter', function(e){
    var $this = $(this);
    var $pop  = $this.clone();
    pop.css({
        position: 'absolute', 
        left: $this.position().left - 5,
        top: $this.position().top - 5,
        backgroundColor: 'red'
    }).addClass('cloned'); 

    $this.parent.append(pop);
});

$('a').bind('mouseleave', function(e){
    $('.cloned').remove();
});

it's untested but something similar to this should do it.

Answer 3

UPDATED: Cross-Browser support

DEMO: http://jsbin.com/anuka3/3

.zoom {
    position: relative;
    color: red;
}
.zoom span {
    display: none
}
.zoom:hover span {
    top: 0;
    left: -30px;
    bottom: -30px;
    display: inline-block;
    position: absolute;
    font-size: 40px;
    background: #333;
    color: #FFF;
    padding: 0 5px;
    margin: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.zoom:hover {
    text-decoration: none
}

Lorem Ipsum is simply <a class="zoom" href="#"><span>survive</span>survive</a> dummy text

Answer 4

Note:use hash(#) before Sitelinks

/* set size of links division and center on page */

Sitelinks

{ margin-left: auto; margin-right: auto; background-color: #212121; }

/* set font properties of links */

Sitelinks p

{ font-family: arial, verdana, serif; font-size: 8pt; font-weight: 600; text-align: left; padding: 4px 0 0 25px; }

/* set color of links and remove underline */

Sitelinks a

{ color: #E5650A; text-decoration: none; position: relative; }

/* set hover or roll over color of links */

Sitelinks a:hover

{ background:#000000; color: #ffafff; font-size: 30px; text-decoration: none; }

Sitelinks span

{ display:none; }

Sitelinks a:hover span

{ display: inline-block; font-size: 10px; background: #333; color: #FFF; padding: 0 5px; margin: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

Mixmasala