tag:blogger.com,1999:blog-42644638199480429362011-11-27T15:23:32.151-08:00Kalim Fleethttp://www.blogger.com/profile/10671503681346729302noreply@blogger.comBlogger11100tag:blogger.com,1999:blog-4264463819948042936.post-41987850192593286182009-11-16T11:05:00.000-08:002009-11-16T17:05:02.059-08:00<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_5ZfuI3tJK7w/SwGjpJXw2HI/AAAAAAAAAEQ/QeIM4-GcxxA/s1600/screenshot_to_blogger.png"><img style="cursor:pointer; cursor:hand;width: 320px; height: 240px;" src="http://4.bp.blogspot.com/_5ZfuI3tJK7w/SwGjpJXw2HI/AAAAAAAAAEQ/QeIM4-GcxxA/s320/screenshot_to_blogger.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5404780955106859122" /></a><br /><p><br /></p><p>Today I want to show you how to use CSS positioning and :hover properties to create a tooltip displaying any users latest tweets. There are several things that are different about this tooltip from others I've seen on the web:<br /></p><br />1. The information shown in the tooltip is dynamic (generated using twitter search json api)<br />2. No server side scripting or database required (all information is fed from twitter search)<br />3. You are not limited to only displaying your tweets. You can display other people's tweets or <br />any search term using twitter search advanced queries (for more search possibilities visit <br /><a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">Twitter Search API</a>)<br />4. You can select text from the tooltip and also click links displayed in the tooltip<br />5. No need to login to your twitter account because the data is simply a public feed based <br />on your search results.<br /><br />Check out the live demo here: <a href="http://bit.ly/2KBttI">Demo</a><br /><p>Download the code here: <a href="http://www.box.net/shared/zgritozsfz">Download</a><br /></p><p>*Code is fully documented but if you require assistance, please comment in this post and I will do my best to answer your questions.</p><p><br /></p><p>This is just the base HTML/CSS.  You can style the tooltip with any backgrounds you like and also add nice transition and animation effects on mouseover using javascript libraries like jQuery or Mootools.</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/4264463819948042936-4198785019259328618?l=design-tuts.blogspot.com' alt='' /></div>Kalim Fleethttp://www.blogger.com/profile/10671503681346729302noreply@blogger.com0