One of the ways to do this it to just add a div that will contain the text of your tooltip, in this case we’ll just give it the class ‘tooltip’.

<p>Show me that cool <a class='special'>tooltip</a>.</p>
<div class='tooltip'>
  <div class=arrow>▲</div>
  <div class=text>This is so cool</div>
</div>

And then add some JS:

$(document).ready(function(){
  $('.special').hover(function(){
  $(this).next('.tooltip').show();
  $(this).next('.tooltip').
    position({at: 'bottom center', of: $(this), my: 'top'})
});

What we’re doing here is that when the user hovers over the link, we show the tooltip div and position it at the bottom of the link using the jQuery UI position method.

$('.special').mouseleave(function(){
  $('.tooltip').hide();
});

And then we just hide it when the mouse leaves the link. You could also set a timer to close it or add a button inside the tooltip to close it manually, this is usefull if the tooltip contains some medias such as a youtube video or links.

Now we just add a bit of styling and that’s it!

.tooltip{
  text-align: center;
  color: black;
  display: none;
  position: absolute;
}
.tooltip .text{
  background-color: black;
  color:white;
  margin-top: -15px;
}
.tooltip .arrow {margin-bottom: 8px;margin-top: -5px;}

You can read more about jQuery UI position here

This time, for the new 4.1 release that is to come, we’ve focused on fixing bugs, polishing the UI and added a few new features that we will discribe in various blog posts.

For now, I’ll show you a few screenshots of the new index page, it isn’t set in stone yet but it already looks much more polished than it used to.

Full Size

One thing we want to improve is usability. To that end, we are going to add more documentation in general directly in the user interface. For starters, we’ll be using fancy tooltips that show information about various UI elements. As you can see in this screenshot, when you hover over a tag, you will see a description of that tag, an icon (if it has one) and a link to follow all questions with that tag.

Full Size

We’ve added tooltips to users links too so you can quickly get an idea of who a user is and follow that user in a single click.

Full Size

Finally, we’ve also added new icons and improved the overall style of the app. For example, this is what the new badge widget looks like.

Full Size

In other news, we are now officially incorporated as a US company, so Ricodigo Inc is now a reality! We’re also working on the payment system with Stripe.com to make sure we offer the best paying experience possible.

That’s it for now, but we will keep blogging about all the new improvements that will come with the new release (including an awesome new styling system that will allow users to completely redesign their group, including the HTML, CSS and JS!). In the meantime, scroll down this page, move your mouse and let your creativity flow :) (Courtesy Paul Irish and Mr Doob)

As you may have noticed, we’ve done a complete overhaul of the design and added many new features. It is hard to decide when exactly to release such a big version change, there are always more bugs to fix and more features to add. For now, Shapado hosting will remain entirely free until all the outstanding bugs we haven’t catched so far are fixed. Rest assure though that we will always have a free hosting offer and that Shapado as a software will always remain Free and Open Source for all.

The design: Now let’s get to the meat, what’s new in this version? Well first, the new design done by @dgfrancisco. We don’t want Shapado to be a clone of anything but to be its own software, with its own personality and style. We want it to be unique in design and unique in features. We hope you like it as much as we do. We’ve also made it flexible enough so you can have a two column layout instead of three or do your own theme without even knowing CSS.

The features: On the features side, we added many of them and we will blog separately about each. That being said, let me introduce you to the biggest features of this release. First and foremost, Shapado now has a real-time UI, this means new answers and questions will appear automatically on your browser with no need to refresh. Making the site more fun to browse, more instant and more interactive. We also have added the ability to answer questions directly from your email client so you don’t have to sign in to Shapado. Each user will also get personal feeds of questions that are of interest to them in order to make their experience on the site more interesting and curated.

Here is a list of the most important changes:

• WebSocket: Shapado now has a live UI that updates itself automatically as questions, answers and comments get added
• Bounties: Offer karma points in exchange for an answer to your question.
• CSS themes: Easy interface to modify each css property
• Connect/merge social accounts: Merge your facebook, twitter and other social accounts.
• Facebook app: Embed shapado inside your facebook page.
• Invitations: Invite your friends.
• Complex search: Search by author, tag, date and more.
• Activities: See a list of latest activities.
• Save favorite answers: Find your favorite answers quickly
• Follow ups: Create new questions out of an answer or even a question.
• Personal feed: Curated list of questions, personal feeds will only show question you follow.
• Friend suggestion widget: Get suggestions to follow users you may know or tags you may be interested in.
• External widgets: Show widgets on your blog so that your users will ask questions from your blog.
• Custom html widget: Show custom html in your widgets.
• For admins: Post activities to twitter, for example all activities of this site are posted on this account.
• Reply by email: Users can now answer questions directly by mail.
• Custom access: Pick what user can use to sign in (email, openid, facebook, twitter etc)
• Redesign: Read above.
• Mobile ui: shapado.com/mobile
• Save search: When you search for something, you can save that search so that it will appear down your personal feeds.
• Attachments: Attach files to questions and answers.
• https: Surf Shapado securely.

Last but not least, Shapado is now localized in English, German, Dutch, French, Spanish, Portuguese, Macedonian, Malay, Italian, Interlingua, Finnish, Galician, Belarusian, Russian, Danish, Persian, Tagalog, Simplified Chinese and more to come. You can contribute to the translation effort thanks to translatewiki here.

Here are some nerd stats of all the changes that went into this release:

 $ git diff --shortstat 3.x..master
 1800 files changed, 43721 insertions(+), 41472 deletions(-)
 $ git log 3.x..master --oneline | wc -l
 1956

We hope you like it and, as usual, report bugs on shapado.com and get the source on gitorious.