Skip to main content

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 :)


Comments

Popular posts from this blog

Projecting HTML Elements on a circle using Javascript

Recently I wonted to create a tree control with a different approach. The requirement was to represent a node tree with main node on the circle center and it's child nodes projected on a circle around it. This is what i wanted. My solution has 5 files prototype.js This is a handy javascript framework. You can download the latest version from there website ( www.prototypejs.org/download ). I am using this to simply handle the onload event in the page. circle.html script.js node-main-left.gif node-sub-left.gif The circle.html, prototype.js and the script.js files are in the root folder and the two images are inside a folder named “images”. This is how the html file looks(circle.html). <html> <head> <script src="prototype.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> <script language="javascript" xml:space...

Simple client side validation library

  Client side validation has never been easy.. Include jQuery and the validator.js < script src = " http://code.jquery.com/jquery-1.11.3.min.js " ></ script > < script src = " ../validate.js " ></ script > Simple validation < form id = " myForm " > < label >User Name < span class = " red-star " >*</ span > </ label > < input type = " text " name = " userName " class = " validate-required " /> < br /> < label >Password < span class = " red-star " >*</ span ></ label > < input type = " password " name = " password " class = " validate-required " /> < br /> < input type = " submit " value = " Login " /> </ form > ...

Overriding default look and feel of GREG - 5.3.0

Following list explains what are the best approach for different use cases. 1 ) - You created a new asset type, and you need to change the look and feel of the details page in the listing page just for that new asset type. To create a new asset type you need to login to the carbon console (username:admin, password:admin) https:// :9443/carbon/ Navigate to Extensions > Configure > Artifacts Click "Add new Artifact" link at the bottom of the page. By default in the "Generic Artifact" area "application" asset type is loaded. Note the shortName="applications" in the root node. "applications" is the name of the asset type. Browse in to /repository/deployment/server/jaggeryapps/store/extensions/assets Create a folder with name "applications"    Now we can override the files in /repository/deployment/server/jaggeryapps/store/extensions/app/greg-store-defaults   Since we are overriding the details page we need to...