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

Post a Comment

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...
8 comments
Read more

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 > ...
1 comment
Read more

Role of GREG permission-mappings.xml

 GREG has a permission-mapping.xml. We can find it at /home/chanaka/Desktop/greg/wso2greg-5.2.0/repository/conf/etc/permission-mappings.xml Each entry has three attributes. managementPermission resourcePermission resourcePaths  Ex: managementPermission="/permission/admin/manage/resources/govern/server/list" resourcePermission="http://www.wso2.org/projects/registry/actions/get" resourcePaths="/_system/governance/trunk/servers" /> There are default configurations in this file. These entries are mapping each permission in the permission tree in to resource paths and assign them permissions. With the above line in the permission-mappings.xml, an admin user who assign the permission " /permission/admin/manage/resources/govern/server/list " will be able to do get operations on registry resources stored at " /_system/governance/trunk/servers ". We can provide multiple resource paths by separating them by comas. There...
Post a Comment
Read more