You open up your browser to your homepage of Google and do a search for laptops. Google keeps track of this for their future advertising usage. You click on a link to Best Buy. Now you have another cookie indicating you went to that website to look at laptops. Then say you click on an ad while looking at laptops for a Wii. Now another advertising network knows you are interested in buying a Wii or other video gaming system. So with just a few pageviews, several ad networks know you want a laptop, video game system, wii, and that you were thinking about buying one at Best Buy.

Now, the next hour, the next day, the next week, the next month, you will see ads now targeting those exact things, Best Buy, Wii, laptops. Some people consider this a convenience and prefer that ad networks know these things about you. I however, along with many others, consider this an invasion of my privacy. I will do my own research, and I don’t need some cheap ad on the internet to tell me what to read and what to buy. That’s why I’ve opted out of advertising cookies. It is a legal requirement of advertising networks actually, which shows you how sleazy what they are doing really is. If you want to opt out of every advertising network out there, there is a fantastic non-profit resource available to you. Check out the Network Advertising Initiative to get rid of all those ad networks on your computer so they can leave you alone!

Safe browsing…

Here’s what we’ll be making:

Now let’s get into the code needed to produce the example. The HTML is actually very simple. We are going to inject the content for the tooltip using JQuery so we won’t even need anything to target except the link that you hover on that triggers it.
Here’s the HTML:

<p>This sentence needs more of an explanation for the user. <span class="question">?</span></p>

The CSS looks pretty long. But in reality, it is built to my own personal liking. The "question" class applied to a span produces the question mark circle icon. You can easily do this with an image if you prefer, or apply it to a simple link with text or a question mark without any styling. Then there are two items for the "tooltip" class. The first item defines what the tooltip will look like (rounded borders, background color, text styling, etc.). The pseudo class of :before (or :after if you like) inserts an item before (or after) the element it is applied to. In this particular instance, the :before statement adds the tip to the tool, which you don’t need to use if you don’t want, or again, you can use an background image if you prefer.
Here’s the CSS:

span.question {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #89A4CC;
  line-height: 16px;
  color: White;
  font-size: 13px;
  font-weight: bold;
  border-radius: 8px;
  text-align: center;
  position: relative;
}
span.question:hover { background-color: #3D6199; }
div.tooltip {
  background-color: #3D6199;
  color: White;
  position: absolute;
  left: 25px;
  top: -25px;
  z-index: 1000000;
  width: 250px;
  border-radius: 5px;
}
div.tooltip:before {
  border-color: transparent #3D6199 transparent transparent;
  border-right: 6px solid #3D6199;
  border-style: solid;
  border-width: 6px 6px 6px 0px;
  content: "";
  display: block;
  height: 0;
  width: 0;
  line-height: 0;
  position: absolute;
  top: 40%;
  left: -6px;
}
div.tooltip p {
  margin: 10px;
  color: White;
}

And lastly the Javascript is actually quite simple. You use the hover toggle event (hover, then unhover) to create it. On hover, we simply append the actual tooltip div and it’s content to the question mark icon. Then on unhover, we remove the tooltip element.
And finally, here’s the Javascript:

$(document).ready(function () {
  $("span.question").hover(function () {
    $(this).append('<div class="tooltip"><p>This is a tooltip. It is typically used to explain something to a user without taking up space on the page.</p></div>');
  }, function () {
    $("div.tooltip").remove();
  });
});

It really isn’t that bad, and it can easily be adjusted to work for several tooltips instead of just one. Got any questions? Comments? Just ask!

Here’s the HTML:

<div class="bubble">
<p>"This could be a quotation from a customer or use it in an HTML cartoon you've created.<br /><br />The possibilities are endless!"</p>
</div>

The CSS is pretty simple, which is good to go along with a very simple piece of HTML. The :after pseudo class creates the blue point, and the :before class creates a smaller white point that makes the blue just look like an outline. The points are actually made using two thick borders on only two sides of a block element that actually has no width or height. It was hard for me to grasp how borders create a filled element when I first saw this, but if you just play with the border widths, you’ll get the hang of it.

Here’s the CSS:

div.bubble {
  display: block;
  margin: 0 auto 40px auto;
  width: 250px;
  background-color: White;
  border: solid 6px #143463;
  border-radius: 20px;
  text-align: center;
  position: relative;
}
div.bubble p {
  margin: 10px;
  font-size: 11px;
  color: #143463;
}
div.bubble:before, div.bubble:after {
  border-color: White transparent transparent transparent;
  border-style: solid;
  border-width: 20px 0px 0px 40px;
  content: "";
  display: block;
  height: 0;
  width: 0;
  line-height: 0;
  position: absolute;
  z-index: 5;
  bottom: -20px;
  left: 150px;
}
div.bubble:after {
  border-color: #143463 transparent transparent transparent;
  border-style: solid;
  border-width: 24px 0px 0px 48px;
  content: "";
  z-index: 4;
  bottom: -30px;
  left: 148px;
}

And that’s it! In my next post, I’ll discuss how to use this speech bubble concept to create a JQuery Tooltip. Any questions? Ask away!

Server-Side: Server-side interactions require sending data to a server and the server sending data back to you, the client.

Client-Side: Client-side interactions don’t need a server, and data is exchanged or altered on your own computer browser without sending any information to a server.

Now if you need the longer explanation, you’ll first need a little background on how the internet works. The internet is just a mapping of connections between millions of computers around the world. When you type in a web address–such as http://www.google.com/–your computer knows that means go find the computer somewhere in the world that has the website for Google on it (I’m really simplifying things here if you can’t tell). The computer that has Google on it is called a "server". Servers aren’t typical computers. They don’t necessarily have any screens to view anything on, and for sites like Google, thousands of servers are collectively used to house the website.

So now that you understand the web (at least in a basic sense), we can start to learn about what server-side and client-side means with a more indepth explanation. So say you are on Google’s homepage. As a user (consumer) of Google, you can interact with their homepage in a multitude of ways. To understand each type of interaction, I’ll give an example using the Google homepage.

Client-Side: When you rollover a link in the navigation bar at the top and its display changes, you’ve just triggered the most basic client-side interaction, the pseudo class :hover in CSS. For a slightly more complex client-side interaction, by clicking on the "more" link in the navigation bar, a menu expands with more options. This is a very typical client-side interaction using simple javascript to hide and show something on your screen. In addition to CSS and Javascript being client-side languages, you should also include HTML, the basis of all displays in the web. Without HTML, the internet would be completely different from what we know it as today, and all three of those languages are interpreted on your own computer within your own browser, needing no interaction or data transfer from a server.

Server-Side: Now, after you’ve typed a search phrase into the search bar, when you click the "Search Google" button or click enter, you’ve now triggered a server-side interaction. Your computer doesn’t have the information it needs to conduct the search you are requesting, so it must send your search across a series of connections to a Google server somewhere in the world, that then sends back the results that it found for you. This is the basic concept behind server-side interactions. Typical server-side scripting languages include Perl, PHP, Java, and ASP.NET (I could keep going, but who is it really helping?). The key to identifying a server-side interaction is noting when your browser page reloads. Server-side interactions require reloading the browser window to show the results that were found. There is one exception to this rule.

A Combination Of Both: It is possible to conduct a server-side interaction without reloading the browser window. This requires a combination of both server-side and client-side interactions. Using a subset of Javascript called AJAX, we can send requests to a server, and then load those results into the client browser without a page reload. An example of this on the Google homepage is the suggested search phrases that change as you start typing. You type in a few characters, Google sends those characters to their server which then looks at frequent searches conducted by other people to make suggestions, and then sends them back and fills in the drop down menu for you to make a selection.

Now hopefully you’ve got a firm understanding of the difference between server and client side interactions and languages. If you’ve got any questions, don’t hesitate to ask.

To do this, you’ll need the following code:

The HTML:

<input id="inputTextboxId" type="text" />

The Javascript:

$(document).ready(function() {
 var watermark = 'textbox watermark text';
 $('#inputTextboxId').blur(function(){
  if ($(this).val().length == 0)
    $(this).val(watermark).addClass('watermark');
 }).focus(function(){
  if ($(this).val() == watermark)
    $(this).val('').removeClass('watermark');
 }).val(watermark).addClass('watermark');
});

This javascript binds an event to both the blur and focus events of the input field. When the field gains focus (someone clicks in), the JS checks to see if the value of the input field is equivalent to the watermark, in which case it will clear it. When the field loses focus (someone clicks out), the JS checks to see if the field is empty, and if it is, places the watermark back in. The javascript also sets the default value of the textbox to the watermark so that you don’t have to edit the HTML at all. All of the “addClass” and “removeClass” events are only necessary if you wish to style the watermark differently than regular text input. To use this, you’ll need some CSS too.

Lastly, the CSS if you are feeling fancy:

input.watermark { color: #999; }

That’s it! A simple text watermark using JQuery that doesn’t require touching HTML at all.