Kalkulator zyskow #2

Kalkulator zyskow #2

by MrTest

HTML

<form>
    <label for="val">Val<span class="tooltip">Span</span></label>
    <input name="val" />
    
    <label for="leng">Leng</label>
    <input name="leng" />

    <label for="incr">Incr</label>
    <input name="incr" />
    
    <label for="minV">MinV</label>
    <input name="minV" />
    
    <input type="submit" />

</form>

CSS

form { width: 100%;}
form label, form input { display: inline-block; float: left; width: 49%;}

form input { clear: right;}


/*
* TOOLTIPS
*/
.tooltip-icon{position:relative;top:-4px;cursor:help;float:right;}
.tooltip-body{background:#44c8f1;color:#fff;padding:7px 12px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;margin:0;position:absolute;left:0;top:0;z-index:200;}
.tooltip-body .tip{position:absolute;left:-9px;top:0;bottom:0;width:9px;background:url('http://dl.dropbox.com/u/17683975/tooltop-icons/tip.png') right center no-repeat;}

JavaScript

$(document).ready( function() {

$('.tooltip').each(function() {
        var tooltipText = $(this).html();
        var jTrigger = $('<img src="http://dl.dropbox.com/u/17683975/tooltop-icons/help.png" class="tooltip-icon" alt="?"/>');
        jTrigger.click(function() {
            return false;
        });
        $(this).replaceWith(jTrigger);
        jTrigger.hover(function() {
            var jTooltip = $('<div class="tooltip-body"><span class="tip"></span>' + tooltipText + '</div>');
            $('body').append(jTooltip);
        }, function() {
            $('.tooltip-body').remove();
        }).mousemove(function(e) {
            $('.tooltip-body').css({
                left: e.pageX + 30,
                top: e.pageY - $('.tooltip-body').height() / 2
            });
        });
    });

});