You too can have fancy tooltips

admin — Tue, 27 Jun 2006 05:57:00 GMT

I had a fairly busy web page that I thought could be streamlined through the use of popups or tooltips (no, not the standard yellow ones!). I was also keen on including images in the tooltips as well, to make them a little more interesting. So I thought about writing my own Javascript & DHTML library, but quickly abandoned that idea, deciding not to reinvent the wheel. Instead, some googling revealed a wonderful little library called wz_tooltips.js from Walter Zorn and it does just what I need.

It looked pretty simple to add this libary into Community Server so I thought about the most logical place to put it, and drag-and-dropped it to the utility directory in the Web Visual Studio project. "A file with the name utility/wz_tooltips.js already exists.". Huh??.... Did I already do that?.... Before I signed myself up for some more brain training, I double-checked the Community Server deployment files. Turns out the guys at Telligent had obviously done their research too and already used the wz_tooltips library for CS tooltips.

So here's a really easy way to add your own tooltips to your pages in Community Server.

Include a call to JavaScript.RegisterToolTips in your Page_Load handler eg.

<script language="C#" runat="server">
void Page_Load(object sender, EventArgs e) {
JavaScript.RegisterToolTips(this);
}
</script>
On each element that you want to display a tooltip from (such as a button, link, etc.), add an onmouseover call to the escape function as per the wz_tooltip documentation. Here's the HTML for the example tooltip shown above:

<li

onmouseover="this.T_WIDTH=400;return escape('<table><tr><td><img src=\'../images/communities.jpg\'

             height=150 /></td><td><b>communities</b> - establishing online communities with

             services such as forums, newsgroups, blogs, file sharing and photo galleries</td>

             </tr></table>')">

         communities</li>

That's all there is to it! Here's a pic of how we've used it.

You can also see it in action yourself at our Services page. Just hover your mouse over the services list at the right.

clyx development blog : Javascript

You too can have fancy tooltips