JQuery Twitter Tooltip

A JQuery Twitter Search Tooltip

After a lengthy hiatus & a long summer break from the bloggersphere as well as other work related projects which have been consuming most of my online time , I considered that my return should at least contribute something for lost time spent away from this blog . Within all of this time spent working on various projects, I have come across many great new and interesting scripts ( code )  by which to enhance design and blogger usability .

Here at Dezignmatterz we have always harbored a great passion and deep respect for development and for the Developers who make it all possible for designers and users to get the most out of their designs and their web sites , by working diligently and passionately developing new codes for all users out there .

The JQuery Twitter Tooltip

The following script  which I came across lately , is a great piece of work which was created by the awesome team over at Codrops ( for any of you Code Geeks familiar with their great site )this team basically drops Killer Codes daily !

This particular script was created by a member of the Codrops team named Cody , and I found it to be a truly great and useful script for anyone who owns a blog and has a penchant for writing and putting out content !

JQuery Twitter Search Functions

What this script does in essence is that it can be [highlight color=”yellow”]utilized into your posts via its callback function[/highlight] ( which I will elaborate upon ) , by  wrapping the span class around any word or search term , and the user reading your post can simply click on the twitter icon and view how many twitter users are searching  or discussing that particular term or word . Those of you who run Multi Authored blogs , and cover a wide range of topics will find this script highly beneficial for your blog and especially for the users who frequent your blog .

The twitter search box pops out and can basically be resized and moved around to wherever the user wishes to place it . The box displays tweets in real time and it uses the JQuery Twitter Search Plugin , which can be customized to incorporate its other  two ( 2 ) Style  features by simply [highlight color=”yellow”]delving into the core .js file titled :jquery.twitter.search.js( for those of you not afraid to plunge into the source code )[/highlight] ; for those of you that prefer  to keep the present design , then you dont need to touch anything and leave everything as it is .

By taking a look at the example provided below , one can gain an idea of how simple this plugin is for any user who frequents your blog to use – simply : Click on the twitter icon and the twitter Pop Up Box appears , you can drag it around , resize it and even leave it where it is while you continue reading the article , it will remain wherever you place it until you decide to close it.

JQuery Twitter Tooltip Example

[title]

Evolution vs. Creation: Origins

[/title]

In the Evolution vs. Creation conflict, Evolutionists do quite well in terms of theoretical science, but fail to find empirical evidence. Evolutionists theorize that the universe, with all that it contains (space, time, matter and energy), exploded from nothing. This is contrary to the First Law of Thermodynamics. Where did space, time, matter and energy come from in the first place? Thus, for Evolutionists, the ultimate question of Origins remains unsolved.

To complicate the Evolutionary position, this original explosion of everything from nothing is unable to explain all of the complexity and fine-tuning in the universe, including cosmic “voids” and “clumps”, retrograde motion of the galaxies, etc. Despite numerous problems, this explosion from nothing has been dubbed the Big Bang and is the accepted theory among the majority of Evolutionists. Evolution is a very unique “science.” Typically, scientists observe evidentiary data and then formulate their conclusions. Evolutionists have formulated their conclusion, and now look for the missing data.

Source taken from : All About Creation

[zilla_button url=”http://tympanus.net/Development/LatestTweetsTooltip/” style=”grey” size=”large” type=”round” target=”_blank”] View Tooltip Demo Here [/zilla_button]

[toggle title=”DISCLAIMER:”]

Some of you may be wondering as to why I decided to do a write up of a code which already exists on Codrops ? Well , in response and in defense of any such questions running through anyone’s minds at this point , I will simply state the following : I decided that a simple step by step tutorial was required on this as soon as I looked at a user comment originally posted on the article Latest Tweets Tooltip with JQuery.

The particular user had stated that he had  :
[highlight color=”yellow”]uploaded the files to my WP Plugin Folder and want to know where I should apply the ” codes” in order to make it
( the script )  work ?[/highlight]

The Author’s response to the particular user was that :[highlight color=”yellow”]”this is a jQuery Plugin and not a WordPress Plugin, you would have to use it directly.”[/highlight]

Now this is fine and good – IF you know how to work with [highlight color=”yellow”]</code>[/highlight], but for the greater majority of bloggers wishing to incorporate certain functions and scripts into their WordPress or Blogger Themes who are not familiar with code or HTML , then this can indeed become somewhat of an overwhelming and burdensome task to say the least  .

Thus, I figured at that point that there are probably more users out there [highlight color=”yellow”]who may not know how to implement this particular script[/highlight] into their themes ( blogs ) as it is , and decided to request Cody’s permission in putting it out here for any of you who would like to utilize this awesome script into your themes , and Cody approved it  ( which I thank him for ).

At this point I would like to state for the record that the JQuery Twitter Tooltip script has been created by Cody over at Codrops and full credit goes to him .

[/toggle]

[zilla_alert style=”grey”] Before we proceed to utilize the Twitter Latest Tweets Tooltip, please download the source files (.zip folder ) by clicking on the button below.

[zilla_button url=”http://tympanus.net/Development/LatestTweetsTooltip/LatestTweetsTooltip.zip” style=”grey” size=”small” type=”round” target=”_blank”] TwitterTooltip.zip [/zilla_button][/zilla_alert]

Utilizing the Script into your WordPress Themes

For users of WordPress , I would advise that you head over to Codrops first and [highlight color=”red”]download the JQuery Twitter Tooltip Files[/highlight]. Once you have done so , please log into your C-PANEL, and in your [highlight color=”yellow”](wp-content) Themes Folder[/highlight] , access your Theme and  create a new Folder ; you can name it ” twittertooltip ” ( if you want to ) or whatever you choose.

Upload your Latest Tweets Tooltip zip file (and please Extract your zip file )  and its contents .

[title]Next Step[/title]

You should create different ” Sub Folders ” such as : twitter.js ( for your twittertooltip.js files ) –  twitterimages ( for your twitter tooltipimages ) and twittercss ( for your twittertooltipcss files ). Doing this will help you to keep track of where everything is located and it will be better organized and wont interfere with any of your other existing Theme Files . So, please create these sub-folders and move each of the files belonging to each category into the above named folders .

[toggle title=”PLEASE NOTE:”]
When I implemented the script I had to [highlight color=”yellow”]Re-name ” the twitter tooltip ‘ style.css ‘ file[/highlight] , because the script was ineffective since my theme also has a ‘ style.css ‘ file – therefore : I would advise any one attempting to run this script to Re-name this file to anything other than ‘style.css‘ as it may also end up making the script not function .

Once you have organized all of your folders , please open your /jquery.ui.theme.css & your twitter.css file ( once you have Re-Named it ! )  in your Editor of your backend and implement the required images ( such as the : icon-grip.png , close.png  & twitter.png  ) into both of these CSS files and SAVE.

[/toggle]
.
[title]Step 3 : Implementing Your Files[/title]

Providing you have followed the  steps described above, please go into your Theme File and open up your ” header.php ” file and directly above your [highlight color=”yellow”]</head>[/highlight] tag , link all of your CSS files as displayed below ( * please replace the file extensions with your own ! ) and hit the SAVE button .

Please Note :

Prior to saving your style.css – which you have renamed to ➔ twitterstyle.css file , [highlight color=”red”]copy and paste the following code into this file before saving and linking the file into your header.php[/highlight]

.search_results { width: 300px; position:absolute; display:none; top:10px; z-index:100; }

STEP 4 : INSTALLING THE .JS FilES

Since you have installed the CSS files into your  header.php [highlight color=”yellow”]</head>[/highlight] tag , you will now open up your footer.php file , and directly above the [highlight color=”yellow”]</body>[/highlight] tag , please copy and paste the files displayed below ( replacing the jquery.twitterpopup.js and the jquery.twitter.search.js with your own files please ! ) .

Also , in order for the script to function properly – you will need to replace the callback function from the one provided as in the example below [highlight color=”yellow”][  $(‘#wrapper’)  ] , to whatever name your own Theme wrapper has ( please dont forget to do this or else the script will be ineffective ! )[/highlight] . Once you have followed the steps described , please hit the ” save ” button.

Making the script work within your Theme

Now that you have implemented all of your scripts , and you are ready to create your next article / post , all you will have to do is simply utilize the following span around any word or term you wish like so :

[highlight color=”yellow”]<span class=”twitter_search”>Web Design and Development</span>[/highlight], and as many other <em>words or terms</em> you wish as in the examples provided here on this post.

That is it – your Twitter Tooltip Search is now ready !

Implementation for the Blogger Platform : Step 1

First, please head on over to Codrops and download the Twitter Tooltip Search file , upload your files to your own host or Blogger itself . Next please implement all of the images provided within the Twitter Tooltip File into the proper CSS files and save them .

In your Blogger Dashboard go to :[highlight color=”yellow”] Design > Edit HTML  >[/highlight]

( There is no need to Expand Widgets for this installation ) . Simply scroll down and locate the following tag [highlight color=”red”]]]></b:skin>
[/highlight] , and once you’ve done so – please copy the CSS snippet code for the twitter tooltip searchdirectly above the [highlight color=”red”]]]></b:skin>[/highlight] tag.

/* latest tweets tooltip */ 
span.twitter_search{
padding-right:20px;
background:transparent url(../twitterimages/twitter.png) no-repeat center right;
cursor:pointer;
}
 

.twitterSearchClose{
position:absolute;
 right:0px;
 top:0px;
background:#aaa
url(../twitterimages/close.png) no-repeat center right;
width:13px;
 height:13px;
cursor:pointer;
}

 .search_results {
width: 300px;
position:absolute;
display:none;
top:10px;

z-index:100;

}

Blogger : Step  2

Once you have copied and pasted the CSS above your [highlight color=”red”]]]></b:skin>[/highlight] tag , scroll further down until you locate your [highlight color=”red”]</head>[/highlight] tag, and directly above your [highlight color=”red”]</head>[/highlight]tag please copy and paste the following scripts provided below .

[highlight color=”yellow”]Please make sure you replace the example files below with your own files[/highlight]

Step 3

After you have applied the above scripts above your [highlight color=”yellow”]</head>[/highlight] tag, scroll all the way to the end (bottom ) of your source and locate the [highlight color=”yellow”]</body>[/highlight] tag and directly above this tag please copy and paste the scripts provided below .

[alert color=”orange”]
PLEASE NOTE :
Notice the function named $(#wrapper) should be replaced by the ID of your theme’s name, which varies for every theme and has a different name or ID.
[/alert]

If you fail to replace this with the ID of your own themes ID within your container , the JQuery Twitter Tooltip will NOT work ! Therefore , please keep this in mind when implementing this script . If any of you encounter any issues within installing the script , you can contact me and I will assist you in implementing it.

[title]An example of what your themes ID may be similar to might look something like this ( but not exactly ! ) :[highlight color=”red”]#body-wrapper[/highlight][/title]

Running the Twitter Tooltip Search within your Blogger Theme

The function for the script to work within your theme is in essence the same as it is for WordPress . When you are ready to create your next post all you will need to do is simply [highlight color=”yellow”]run the span around any word or term[/highlight] you wish to emphasize like so :

[note]
[highlight color=”yellow”]<span class=”twitter_search”>Web Design</span>[/highlight] , or any other word you wish to wrap the span around
[/note]

[title]

That is it – your Twitter Tooltip Search is now ready for your Blogger Theme !

[/title]

Drag it , resize it , its all up to you !

If any of you encounter any problems within utilizing this script , you can contact me and I will try to assist you – or if you wish you may also contact Cody over at Codrops.

Enjoy your Twitter Tooltip.

Thank you Cody for this great script !