Archive for the ‘ Tutorials ’ Category

Tooltips in CSS

A tooltip is a small box that appear near an object in a graphical user interface when a pointer or other cursor controlled by a mouse passes over or rests on that object and which contains a brief text message identifying or explaining the object. In the context of a website the information shown in a tooltip is read from the title tags of an element on a page. These are stylized all over the web general using JavaScript and CSS. That’s not what I’m going to be teaching you to create though. I am going to show you how to write a tooltip in pure CSS.

Let’s start with a basic XHTML document.

<p>
    <a href="http://www.johndesu.com/" class="tooltip">
    John Dyer<span> (Visit my blog) </span></a>
    is a student at the University of Pittsburgh majoring in computer science.
</p>

Notice that the link has been given a class of tooltip. Inside my link I have added the text I want to be displayed as the link text and the text I want to be displayed in a tooltip. It is good practice to enclose the tooltip text in brackets like I have done so that it will still make sense if styles are turned off.

Now we need to set the position property of the anchor tag to relative in order to be able to position the contents of the span absolutely in relation to it’s parent element, the anchor tag. We also don’t want the tooltip text to display by default so we will set it’s display property to none.

a.tooltip {
    position: relative;
}
 
a.tooltip span {
    display: none;
}

Next we want to make the text contained in the span tag appear when the anchor is hovered over. We do this by setting the display property of tooltip:hover span to block and positioning the contents of the span below and to the right of anchor using absolute positioning.

a.tooltip:hover span {
    display: block;
    position: absolute;
    top: 1em;
    left: 2em;
}

And that’s really all there is to it. Let’s add some custom styling now to make it look more like a tooltip. Feel free to change any of stylistic settings to your liking. This is obviously just an example.

a.tooltip:hover span {
    display: block;
    position: absolute;
    top: 1em;
    left: 2em;
    border: 1px solid #996633;
    padding: 0.3em 0.5em;
    background-color: #FFFF66;
    color: #000;
}

Note that this technique requires a standards compliant browser such as Firefox. Of course there are issues in IE and for some reason there can be problems in Safari as well. A quick fix for IE 5.x from Andy Budd is the following:

a.tooltip:hover {
    font-size: 100%; /* Fixes bug in IE5.x/Win */
}

View a working example

If you enjoyed this tutorial, why not subscribe to my feed to receive the latest updates and tutorials from JohnDesu.

2009
01/14
POSTED BY
John Dyer
CATEGORY
CSS
Tutorials
TAGS



View Comments

Getting Started With Rails Migrations Part 1: Creating Migrations

A migration is simply a Ruby source file in your application’s db/migrate directory. These files help to make small changes to the database extremely easy and quick. Want to add a table or rename a column? Write another migration and run rake db:migrate. With automatic versioning you are able to see the changes made to the model just by looking at the latest migration file. No more repetitive SQL queries. Now you can access your data in an understandable way right in your code. With that, let’s get coding!

First we can use either the rails generator to create a migration or use the model generator, which will also give us a migration file. Note: you could create these files by hand, but it is less error-prone and probably more efficient to use a built-in generator.

To create a migration with the model generator we would do something like this:

ruby script/generate model post
  exists app/models/
  exists test/unit/
  exists test/fixtures/
  create app/models/post.rb
  create test/unit/post_test.rb
  create test/fixtures/posts.yml
  create db/migrate
  create db/migrate/20090113055719_create_posts.rb

To create a migration on its own we would do something similar to this:

ruby script/generate migration add_category_column
exists db/migrate
create db/migrate/20090113055952_add_category_column.rb

To run the migration we use the db:migrate task

rake db:migrate

When running the db:migrate Rake task, a schema_migrations table is looked for to keep track of migration versions. If one isn’t found it will be created on the fly. After each migration is run a row in the schema_migration table is added.

You can also use the db:migrate Rake task to force the database to a specific version by supplying it with the Version= parameter.

rake db:migrate VERSION=20090113055719

To revert the database to it’s original state supply Version= paramter with 0.

rake db:migrate VERSION=0

If you run a migration whose version is higher than the version of the current database, the migration will be applied. Somewhat differently, if you run a migration whose version is lower than the version of the current database, Rails will look for the migration file whose number matches the database version and undo it.

I hope this tutorial has helped you to begin to understand ActiveRecord and how useful migrations can be. In the next article in this series we look at what makes up a migration in more detail.

2009
01/13
POSTED BY
John Dyer
CATEGORY
Ruby on Rails
Tutorials
TAGS



View Comments