Andrew Rea

I think I am thinking too much about how to write a good blog post.  I think I need to master letting my brain flow while intercepting the output and tweaking things.  Well I have not yet mastered it, but I shall continue to try.  I was asked today to create a simple JQuery plug in which showed an html element containing a links title and this should be able to be styled and also follow the mouse whilst in hover state.  It is kinda like a pimped up tooltip.  The only thing out of the ordinary I did was hijack the rel attribute of the link as, if I continued to use the title attribute I got the default browser tooltip which overlaid my DHTML div.  I was thinking about creating my own attribute to add to the tag, but then again this would probably fail XHTML Validation.  This makes me wonder because from what I have read the new and upcoming version of the ASP.NET Ajax library introduce different attributes to the HTML.  Not sure if this is due to be released with the next iteration of the HTML standard.

Write to my plug in.  Here is the actual code I wrote for the plug in itself:

        jQuery.fn.popupLinkHelper = function(options) {
            var element = document.createElement("div");
            $(element).addClass(options.popupCssClass).hide();
            document.body.appendChild(element);

            return this.each(function() {
                $(this).hover(function() {
                    $(element).show();
                    $(element).html($(this).attr("rel"));
                    $(this).mousemove(function(e) {
                        $(element).css({
                            "position": "absolute",
                            "top": e.pageY + options.offsetY,
                            "left": e.pageX + options.offsetX
                        });
                    });
                }, function() {
                    $(element)
                });
            });
        };

To give an example using CSS I used the following CSS class to spruce up the popup:

        .popup
        {
            width: 150px;
            padding: 10px;
            background-color: #3366CC;
            border: black 2px solid;
            color: White;
        }

To trigger this code I use a notation publicised on the JQuery plug in authoring page.  As well I threw in some configuration options to as to be able to have more flexibility with it in the future:

    <script type="text/javascript">
        $(function() {
            var options = {
                offsetX: 50,
                offsetY: 0,
                popupCssClass: "popup"
            };
            $("a.pol").popupLinkHelper(options);
        });
    </script>

</body>

To test the following out I simply created a ul li block using the class pol (Pop out link – :-P) to identify those which I would target with the plug in.

    <ul>
        <li><a href="#" rel="This is example 1" class="pol">Example Link 1</a></li>
    </ul>

And the result:

Cheers for now:

Andrew,

P.S. Cross Browser Transparent Rounded Corners which is compatible with IE 6 – This is like Rocking Horse Muck, so hard to find lol.