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.