SweetTitles - fading tooltips (and my extender)

Dustin Diaz, among other cool things, has written a nice Javascript library called SweetTitles to convert hyperlink's Title attribute (Tooltip property in ASP.NET HyperLink web controls) - those yellow popups appearing when you hover the mouse over them - into nice fading boxes.

The picture below shows the effect change when using it:



You should know I'm becoming the wrapper man so I thought I would ease its integration with ASP.NET into a draggable web control - as well as enhance it a bit. The control I created is a simple extender control and all you have to do is drag it onto your webform to see everything happen magically. All the HyperLinks and <a> tags on your page receive that nice effect for free.
<asp:hyperlink id="HyperLink1" runat="server" navigateurl="~/SomePage.aspx"
 tooltip="I link to SomePage.aspx">SomePage</asp:hyperlink> <a title="I link somewhere else" href="/SomeWhereElse">SomeWhereElse</a>
The control is called SweetTitlesExtender, has no runtime appearance and exposes a single enum property called EmbeddedStyleSheet with 5 values:
  • None - no stylesheet will be embedded, you'll have to write your own
  • Classic - the one shipped by Dustin Diaz with the library
  • Dustin - the one Dustin Diaz uses on his own website
  • Blueish
  • Greenish
  • Reddish
That property allows to choose among some some stylesheets I have embedded into the assembly to provide some ready to use style options, which look like in the following picture (I'll let you guess which one corresponds to each enum value):



In case you want to provide your own style, set the property to None and create a stylesheet with the following structure:
body div#toolTip { position:absolute;z-index:1000; [...] }
body div#toolTip p { [...] }
body div#toolTip p em { [...] }
body div#toolTip p em span { [...] }
Since the original library is licensed under a Creative Commons Attribution Share Alike (by-sa) license, my control is under the same license.

Binary and source available.

kick it on DotNetKicks.com

Published 31 July 2006 06:12 AM by simoneb
Filed under: , ,

Comments

# Dustin Diaz said on 01 August, 2006 10:28 PM
Cool. That looks fun :)
I would encourage folks to also check out the YUI style of tooltips:
http://www.thinkvitamin.com/misc/yui-demos/demo-11.html

It's more extensible, however it doesn't incorporate the URL and the other features like putting in accesskeys (when found).
# simoneb said on 01 August, 2006 11:52 PM
Yes I love the YUI, I used that for my BusyBoxDotNet library, it has great compatibility with other JS libraries (Atlas) and the latest release is full of great stuff. Congrats for your works btw, I like 'em.
# DotNetKicks.com said on 04 August, 2006 12:09 AM
You've been kicked (a good thing) - Trackback from DotNetKicks.com
# simoneb said on 04 August, 2006 08:56 PM
Sorry mr Error, I had to remove your comment because I cannot publish my email address here. Please let me know if you are still experiencing some troubles, I tried but it seems to be working.
# error said on 04 August, 2006 09:28 PM
hi, still unable to download from both links (btw, i'm using IE7 Beta3 )-->(Server Error in '/' Application.
--------------------------------------------------------------------------------

Runtime Error
Description: An application error occurred on the server. The current custom error settings for this application prevent the details of the application error from being viewed remotely (for security reasons). It could, however, be viewed by browsers running on the local server machine.
# simoneb said on 04 August, 2006 09:34 PM
I get the same error with IE6 and FF if I copy the link to the address bar and then navigate there, but simply clicking on the link in the post is working for me. BTW, try with the direct link: http://busyboxdotnet.qsh.eu/downloads/SweetTitles.bin.zip, I'm using an HttpHandler for tracking the downloads.
# error said on 06 August, 2006 05:36 PM
hi, These links, when clicked, causes the server error: "Binary and source available".

i didn't notice any other link in the post?

direct link from your comment did the trick, it worked, thanks!
# simoneb said on 08 August, 2006 02:00 PM
I'm not getting complaints from other people, so I guess the problem could be on your side.
# error said on 12 August, 2006 09:26 AM
Hi, funny thing.. now the links are working.. go figure :)
# simoneb said on 12 August, 2006 09:30 AM
Good to know, btw I didn't do any changes...
# Dee said on 06 February, 2007 12:03 AM
what are instructions for installing this dll ? I have it in the bin folder but what is is required on my aspx page so I can use this ????
# simoneb said on 06 February, 2007 07:24 AM

It's very easy Dee, just check out this short article on the MSDn library: http://msdn2.microsoft.com/en-us/library/ms165355(VS.80).aspx.

# Dee said on 06 February, 2007 12:26 PM
That link shows how to put the dll into the GAC. I was hoping to get information on how to implement in a web page is this correct ? <%@ Register Assembly="SweetTitles" Namespace="SweetTitles" TagPrefix="MC" %> ... how do I get this to interact with the liks ??
# simoneb said on 06 February, 2007 05:13 PM

Well that link didn't show how to put the control in the GAC but instead how to add it to the toolbox so that you could then drag on your web forms from there.

However what you wrote is correct. Your hyperlinks receive the effect for free, just add the control to your page. It exposes a single property, EmbeddedStyleSheet, which lets you choose the appearance.

# Dee said on 06 February, 2007 05:21 PM
ah so it does :) one more question, on the asp:LinkButton, I'm getting : [Tooltip text] + "javascript_doPostback...." how do I avoid displaying the "javascript..." stuff ?
# simoneb said on 06 February, 2007 05:32 PM

Dee, I'm wondering if you should need to learn some html and ASP.NET before ;)... if you're using a LinkButton you need to do a postback, and the only way you can do it with an anchor tag is via javascript.

# Dee said on 06 February, 2007 06:30 PM
what I'm trying to convey is, how do I omit the actual url/href/navigateurl address in the sweetitle display ? I only want the tooltip / title or is this not possible ??
# simoneb said on 06 February, 2007 07:32 PM

I that case I think you'll have to edit the source of the script manually.

# Dee said on 06 February, 2007 10:11 PM
Does anybody have a .bat file that wil enable me to recompile this after the change ??
# simoneb said on 07 February, 2007 11:15 AM

You don't need to use the csc compiler directly, you can use Visual Studio, and if you don't have it you can always downoad the free express edition from Microsoft.

Otherwise just use directly the script by Dustin Diaz (http://www.dustindiaz.com/sweet-titles), it will be pretty straightforward to use it.

This site

Search

Go

This Blog

News

Syndication

Sponsors

  • MaximumASP