Google dictionary tooltip – a cool thing

Have you ever seen something on the internet that surprised you a great deal? I saw something cool today that made me realize that there are companies out there like Google© that do clever things in their work even if it is a very small thing. I am talking about Google dictionary extension for chrome which employs some cool techniques to render the tooltip arrow. I have seen a couple of tooltip implementations online like on LinkedIn® and Twitter, but all they do is use an image for the arrow and sometimes complete tooltip balloon as an image. What caught my attention in Google Dictionary balloon was the use of simple plain html divs, and after I dug deeper, I realized there is no magic going on in there. Check this out.

Using chrome on a Wikipedia page for “Programmer”, I look up the meaning of this terminology in Google dictionary.



I do an “Inspect element” to see what styles arrows has.



The div I am interested in is next to the div with class “gd-bubble”, which is just a container for two inner divs which are creating the arrow effect. If you click the second inner div of this container, you can get all the styles. In order to figure out what exactly is happening there, I give some different colors to its borders (left,right and top).



As soon as I give the colors, it (second inner div) will look like this:



Next, in addition to border colors, I now try to change its height and width and see what happens.



It is now time to touch the first inner div as well. We give a green color to its top border (border-top) in order to distinguish it from its sibling (second inner div). The result I get is this:



To my surprise, the tooltip arrow is nothing but just a box with its bottom border (border-bottom) stripped off. Now, In order to give it an arrow shape, what I have to do is reduce its width to zero.



And, changed the height to “auto”.


Now change the border colors of the second inner div back to “transparent”.



As well as change the border-top color of the first inner div back to “transparent” and there I go. What I get is not a multi-color box, but a nice tooltip arrow pointing downwards.



I know tooltip is not a big thing, but the point is that at times even the smallest thing can make a big difference in the performance of the site. It doesn’t imply at all that using an image will slow down the rendering of the page for the image can be cached, but when I can use native html to accomplish something, then why not.



Commonly used JQuery methods and snippets

It’s been a long time since I have written anything on my blog. I seriously feel that it is turning into an “update-only-when-I-have-time” kind of thing. I don’t like it, but can’t do anything. That’s the way life goes. Anyways, there is something I have to say about JQuery. I am very much impressed with it and the way it is making everybody’s life easier. It is like the social networking fever in the software development industry where everybody seems to be talking about JQuery, its plug-ins and trying to find new ways to use it in one way or the other. It is a good thing. I also use it whenever I see even a little room to insert JavaScript in web applications. I can’t recall when was the last time I used  document.getElementById():). JQuery is taking over the world. All we need to do is to keep up with its pace if we want to get ahead in web development business.

The thing which bothers me more than anything else whenever I use JQuery is the fact that it’s all scattered. A small number of commonly used JQuery methods are being used everywhere repeatedly without change. This is definitely not a problem with JQuery, but with me as I am a long time fan of putting all the JavaScript dirty stuff in one file. I guess the same can’t be achieved with JQuery for its methods are tightly coupled with the HTML elements on the page.

One might think what I am trying to achieve here. My intention is to have all the JQuery methods in one place so that I can come back to them whenever I need them. I know the JQuery documentation is there exactly for this purpose, but I guess that documentation is not control-driven rather functionality driven. For example if I am using a Dropdown control on my page and using JQuery want to find out its selected value, I have to undergo the same struggle I went the last time in order to figure out all the possible methods I can use to accomplish the task. How about creating a control driven JQuery wrapper that will wrap the functionality of JQuery library core methods? err…that was just of the top of my head.

May be my thinking is not legitimate and it is just a matter of spending more time around JQuery and I will start memorizing every bit of it. May be. Anyways, for the time being, I have decided to help myself by compiling a small list of JQuery methods I HAVE USED SO FAR in different scenarios in order to commit it to my memory. This list will be updated with more methods in future as I use them.

  • Checkbox list has at least one item CHECKED (.length())
    if ($("div.container input:checked").length == 0)

  • CHECK/UNCHECK a Checkbox (.attr(name,value) / .removeAttr(name))
    if ($("input:checkbox").attr("checked") == true)
    $("input:checkbox").attr("checked", "checked");

  • Dropdown list has a SELECTED item (.val())
    if ($("div.container select.dropdownlist").val() != -1)

  • VALUE of the Selected Checkbox (.attr())
    $("div.container input:checked").attr("value"); 

  • TEXT between <SPAN> and </SPAN> (html())
    $("div.container input:checked").find("span").html();

  • Setting the VALUE of a Textbox or a Hidden field (.val(value))

  • Getting a STYLE property from first matched element (.css())
    if ($(this).siblings('.container).css("display") == 'none')) 

  • Animating the element OPACITY  (.fadeIn() / .fadeOut())

  • Switching between EXPAND and COLLAPSE images (.attr(name,value))
    $(this).children("img").attr("src", '<%=ImagePath%>Collapse.png');  
    $(this).children("img").attr("src", '<%=ImagePath%>Expand.png');

  • Changing the CSS CLASS NAME (.addClass(name))

  • Creating the <OPTGROUP>s in an ASP.NET Dropdown list (.wrapAll())
    I did I blog post here about it a while ago where I have shown how <OPTGROUP>s can be created in an ASP.NET Dropdown list using just two lines of JQuery code.
    $("select.dropdownlist option[@type='1']").wrapAll('<optgroup label="Level1">'); 
    $("select.dropdownlist option[@type='2']").wrapAll('<optgroup label="Level2">');

  • Getting a COMMA SEPERATED LIST of VALUES of selected Checkboxes (.SerializeArray())
    The below small function makes use of JQuery .SerializeArray() method which returns form elements as an array of name/value pair. Each element’s value will then be pushed into another array and returned as a comma separated string.
    function GetSelectedApplicants()     
    var fields = $("tr td input:checkbox:checked").serializeArray();
    $.each(fields, function(i, field)
    return selectedApplicants.join(',');

  • Creating a DYNAMIC TOOLTIP containing the data from ASP.NET web server. (.ajax())
    I wanted to create a fancy dynamic tooltip like the one on LinkedIN® and Google Dictionary Lookup in Chrome. I ended up using JQuery .ajax() method which is calling ASP.NET server-side function asynchronously and after retrieving the data populating the tooltip container with HTML elements around the data.
    function GetItemList(item, appID) 
    type: "POST",
    url: "ListApplicants.aspx/GetFolderList",
    data: "{id: " + appID + "}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg)
    //hiding the loading bar once the resluts has been retrived.
    item.parent().children(".loadingbar").css("display", "none");
    '<div class="toolTipWrapper">'
            + '<div class="closex" onclick="closex();">[x]</div>'
                    + msg.d
            + '<div class="arrowContainer">'
            + '<div class="arrowInner"></div>'
        + '<div class="arrowOuter"></div>'
    + '</div>'
    + '</div>'

  • Clearing the TEXT field on focus (.focus())
    Sometimes we need to display a default text in the textbox like “Click here to search” or “email address” to inform the user what needs to go in the textbox. The below snippet makes it easier for us to clear the text as soon as the user clicks on the textbox to type something.
    $("input.text").focus( function() {     
            if ( $(this).val() == '(email address)' || $(this).val() == 'Site Search...' )
    } );

  • Selecting an element which does NOT have a particular stylesheet. (:not())
    $("div.container div p:not(.quote)").css('display', 'none');

  • Appending the content of an element to the end of another element (.append())

Honestly, I have no intension to write another JQuery documentation, but at times it makes a lot of sense to have everything we have used so far in one place, specially if it is just one group of things being repeated again and again. The ultimate goal is to scribble down the way I have used JQuery methods with web/HTML controls.