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.
