Kawa.netxp [YUI] Link tooltip with website's thumbnail screenshot

This is a mash-up demonstration using Yahoo! UI Library's YAHOO.widget.Tooltip object with Simple API's thumbnail generating service. Try to move your mouse cursor onto the links below:

• Yahoo! UI Library: Tooltip
• Google
• Yahoo!
• Apple
• Microsoft Corporation
• Amazon.com
• digg
• Wikipedia
• Flickr: Photos from Yusuke,SF
• kawa.net xp top page

Stylesheet and JavaScript Code

It's short enough. Thanks, YUI and SimpleAPI!

<script type="text/javascript" src="js/yahoo.js"></script>
<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/dom.js"></script>
<script type="text/javascript" src="js/container.js"></script>
<style type="text/css"><!--
.tt {
    position: absolute;
    padding: 4px;
    color: #333333;
    background-color: #DDEEFF;
    border:1px solid #66CCFF;
    width: 320px;
    font-size: 13px;
    font-family: Arial;
}
--></style>
<script type="text/javascript"><!--
    function init() {
        var list = document.getElementById('links').getElementsByTagName('a');
        for( var i=0; i<list.length; i++ ) {
            var el = 'tooltip'+i;
            var url = list[i].href;
            if ( ! url.match( /^https?:/ )) continue;
            var title = '<img src="//img.simpleapi.net/small/'+url+'">';
            if ( list[i].title ) title += '<br>'+list[i].title;
            var tp = new YAHOO.widget.Tooltip( el, { context:list[i], text: title, autodismissdelay: 5000 } );
        }
    }
    YAHOO.util.Event.addListener(window, "load", init);
--></script>

Comments by AjaxCom

Links

• kawa.net xp top page

Trackbacks by AjaxTB

Trackback URL:http://www.kawa.net/service/tb/ajaxtb.cgi/works/js/tips/yui-tooltips-e.html