CSS Big Tip

by brennan

HTML

<html>
    <head></head>
    <body>
        <div id="map">
            <img src="http://testnet.library.ryerson.ca/dev/libmap/static/maps/6th_top.png" alt="" />
            <div class="stack" style="width:12px;height:148px;top:350px;left:425px;">
                <div id="pop-container" class="remove-pop" style="position:absolute;padding:20px;display:inline-block;">
                    <div class="ipad-pop" data-tip="l">
                        <span>
                            <b></b>
                            <img src="http://syndetics.com/hw7.pl?isbn=9780230109292%20(alk.%20paper)/SC.gif" alt="" width="66" height="100" />
                            <p><a href="http://google.com">Harry Potter Book</a></p>
                            <p>Hi This book rocks</p>
                            <p class="secondary">This is lame info</p>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

#map{
    position:relative;
}
.stack{
    position:absolute;
    display:block;
    border:1px solid #ccc;
    background-color:#fff;
    border:1px solid transparent;
    background-color:transparent;
    box-shadow:0 0 20px 10px rgba(0,160,255,1);
    border-radius:1px;
}
/* Popup Below */
.ipad-pop{
    display:inline-block;
    background-color:#333;
    background-clip: padding-box;
    color:#fff;
    min-width:250px;max-width:350px;
    border-radius:8px;
    border:1px solid #222;
    font-family: sans-serif;
    box-shadow:0 0 15px rgba(0,0,0,0.6);
    opacity:0.9;
    -webkit-transition: all 0.25s ease-in-out;
}
.ipad-pop:hover{
    box-shadow:0 0 20px rgba(100,160,255,1);
    opacity:1;
}
.ipad-pop span{
    display:block;
    position:relative;
    border:1px solid #666;
    border-radius:7px;
    padding:10px;
    clear:both;
}
.ipad-pop span:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.ipad-pop b{
    display:block;
    position:absolute; 
    width:0px;height:0px; 
    border:10px solid transparent;
}
.ipad-pop[data-tip="t"] b{
    top:-20px;left:50%;
    margin-left:-10px;
    border-bottom:10px solid #333;
}
.ipad-pop[data-tip="tl"] b{
    top:-20px;left:8px;
    border-bottom:10px solid #333;
}
.ipad-pop[data-tip="tr"] b{
    top:-20px;right:8px;
    border-bottom:10px solid #333;
}
.ipad-pop[data-tip="r"] b{
    right:-20px;top:50%;
    margin-top:-10px;
    border-left:10px solid #333;
}
.ipad-pop[data-tip="b"] b{
    bottom:-20px;left:50%;
    margin-left:-10px;
    border-top:10px solid #333;
}
.ipad-pop[data-tip="bl"] b{
    bottom:-20px;left:8px;
    border-top:10px solid #333;
}
.ipad-pop[data-tip="br"] b{
    bottom:-20px;right:8px;
    border-top:10px solid #333;
}
.ipad-pop[data-tip="l"] b{
    left:-20px;top:50%;
    margin-top:-10px;
    border-right:10px solid #333;
}
.ipad-pop img{
    position:relative;    
    display:block;
    float:left;
    border-radius:3px;
   ...

JavaScript

$(document).ready(function() {

    var offset = 15,
        padding = 20,
        topX = $('.stack').position().left,
        width = $('.stack').width(),
        height = $('.stack').height(),
        topY = $('.stack').position().top,
        placeX, placeY, tipDir;

    if (width < height) {
        placeX = width + offset - padding;
        placeY = (height / 2) - ($('#pop-container').height() / 2) - padding;
        tipDir = 'l';
    } else {
        placeX = (width / 2) - ($('#pop-container').width() / 2) - padding;
        placeY = height + offset - padding;
        tipDir = 't';
    }

    $('#pop-container').css('top', placeY).css('left', placeX);
    $('#pop-container .ipad-pop').attr('data-tip', tipDir);


});