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:
1. The information shown in the tooltip is dynamic (generated using twitter search json api)
2. No server side scripting or database required (all information is fed from twitter search)
3. You are not limited to only displaying your tweets. You can display other people's tweets or
any search term using twitter search advanced queries (for more search possibilities visit
Twitter Search API)
4. You can select text from the tooltip and also click links displayed in the tooltip
5. No need to login to your twitter account because the data is simply a public feed based
on your search results.
Check out the live demo here: Demo
Download the code here: Download
*Code is fully documented but if you require assistance, please comment in this post and I will do my best to answer your questions.
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.
0 comments:
Post a Comment