My help bubble

I wrote a simple help bubble script for input elements.

This how it looks.

How to do the same in your product.
--------------------------------------------------------------------------------
Fist add this two css classes to your css file.

.speech-bubble{
    width: 780px;
    background: #eff1f1;
    border:solid 1px #dadada;
    padding: 10px;
    color:#686868;
    position: absolute;
}

.speech-pointer {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #eff1f1;
    display: block;
    width: 0;
    z-index: 1;
    left: -15px;
    top: 25px;
}

--------------------------------------------------------------------------------
Secondly add the following html elements inside your htmls elements. I added those just before the tag closing line.
<div class="speech-bubble help-section" id="speech_bubble_container" style="display: none">
    <div class="speech-pointer"></div>
    <i class="icon-help"></i>

    <p></p>
</div>

--------------------------------------------------------------------------------
Thirdly put the following line inside your section.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  

--------------------------------------------------------------------------------

Fourthly in your input elements put the following attributes.

class="js-help"
data-help="Your help text"
data-help-x-offset="50"
data-help-y-offset="-10"

Use data-help-x-offset, data-help-y-offset to position the bubble relative to your input element.

--------------------------------------------------------------------------------
Finally add the following javascript to your page.

$(function(){
    $('.js-help')
        .focus(
        function () {
            var $input = $(this);
            var bubbleLeft = $input.offset().left + $input.width();
            var bubbleTop = $input.offset().top - $input.height() / 2;
            $('#speech_bubble_container p').html($input.attr('data-help'));
            bubbleLeft += parseInt($input.attr('data-help-x-offset'));
            bubbleTop += parseInt($input.attr('data-help-y-offset'));
            var bubbleWidth = Math.floor($(document).width() - bubbleLeft - 105);
            $('#speech_bubble_container').css({'width': bubbleWidth + "px"}).show('fast').css({"position": "absolute", "left": bubbleLeft + "px", "top": bubbleTop + "px"});
            console.info(Math.floor(bubbleWidth));
        }
        ).blur(
        function () {
            $('#speech_bubble_container').hide();
        });
});

Good luck :)