Latest Tweets Tooltip with jQuery

If you have a news website, it might be interesting for you to allow your users to see the latests tweets about a topic. Here is a jQuery plugin for […]

If you have a news website, it might be interesting for you to allow your users to see the latests tweets about a topic. Here is a jQuery plugin for showing the latest tweets about a certain word or phrase.

For this plugin we are using the jQuery Twitter Search Plugin.

Words or phrases that you want to be searched for in Twitter, are wrapped with the following span:

<span class="twitter_search">Some search term</span>

The popup box that appears can be dragged and resized. Clicking on the cross will make it disappear. The tweets are constantly being loaded in a predefined time span. This loading stops when the user hovers over the tooltip box.

If you want to configure and restyle the tooltip, you will need to have a look at the configurations of the Twitter Search Plugin. Many parameters can be set here, from style to timings.

You can call the plugin like this:

$(function() {
	$('#article').find('.twitter_search').twitterpopup();
});

where #article should be replaced by the ID of your container.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

cody

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 20

Comments are closed.
  1. Hey Guys,
    cool thing.

    I uploaded the folder in my WP-Plugin folder. What do i have to write in the header or so, that it works?!

    Big thanks!

  2. Sorry for double Post. What Plugin do you use, to make the code phrases look like code, and made it so good to handle.

  3. Very nice idea. I just don’t know how often that can be used but still, nice implementation

  4. http://www.handbagsonsales.com

    Chanel Handbags

    Gucci Handbags Gucci 2010 New Handbag

    Hermes Handbags

    Balenciaga Handbags

    Bottega Veneta Handbags

    Chloe Handbags

    Coach Handbags

    Dior Handbags

    Fendi Handbags

    Dolce & Gabbana Handbags

    Hermes Handbags

    Versace Handbags

    Prada Handbags

  5. Hello Cody,

    Just came across Codrops.
    One word for all your work here – AWESOME.
    Very useful and totally Web 2.0 work.
    One question, where did you get your avatar ?

    Thanks.

  6. Awesome script Cody , and it was a snap to implement , great work you guys do here always !

    Was wondering if it would be OK w/ you if I could write up a tut on how the script could be implemented manually for users of the Blogger platform as well for users of WP who may not know how to utilize the script ?

    Giving you full credit & linking to the original article of course 🙂

    Thanx for an awesome script Cody ! 🙂

  7. Hi there ,

    Would it be possible to have the latest user tweets rather than the search words? do you know what i mean by that? i tried to put the tweet username between the brackets but it doesn’t work. Any help would be really appreciated…

    regards

  8. Hi there,

    I’m not sure you saw my comment above.. Please let me know if you know how to do it,..

    • Hello dave,

      this example is using the twitter search plugin (http://jquery.malsup.com/twitter/), and it uses the search API method. If you would like to display the latest tweets of a specific User, then I guess you would need to change the plugin to call the respective api method. Probably you would also need to parse the response in a different way.

      Cheers

  9. your site and your posts are awsome … your idea is great, dreaming of the same thing about “related posts” and tags on WP. The idea is here 🙂 thank you so much. I have spent 2 hours on your website now … and I’m crying how much it’s so great 🙂

  10. First off, very nice tutorial and code here. It works great. I do have a follow up question though.

    Is there a way to show the Twitter Search query on-hover, instead of having to click the icon/text to show it? I tried going through the code but didn’t find a place to put hover that works. Any help? Thanks!