Alternate Tool-tips for DotNetNuke by DnnZone

Tool-tips on website are small things which can play a big role in website design. Default browser tool-tip has certain limitations, e.g. you cannot control the back-ground or text color and html tags are not supported in the default tool-tips.

Alternate Tool-tips is an alternate way to show nice looking tool-tips instead of the browser default one. You simply need to add this module to a page and it will convert the default tool-tips to nice looking alternate tool-tips.

You can see example of Alternate Tool-tips in following demo links:

• Improved tool-tip style

• Control look & feel

• HTML tags are supported

• You can use images in tool-tip, if specified in title attribute

How this Module Works?

You just need to add this module to a page, where you want to transform the default tool-tips into alternate tool-tips. Once module is added to the page, it will transform the tool-tips right away using the default settings. Settings can be changed from Module Settings page. You don't need to do anything special to the tool-tip text as this module will work on the title attribute (the same attribute on which the default tool-tips work).

Version 02.00.00

• Added support for alternate tool-tips for image (<img .../>) alt attribute

If you want to have alternate tool-tips on all pages, you can use the option "Display Module on All Pages?". If you have any questions/concerns, feel free to contact us at dnnzone@gmail.com. 

Module Settings

You can customize following attributes of the Alternate Tool-tips module from module settings page:

• Text Color - Specify the color for tool-tip text. Color should be specified in RGB format (e.g. #FFFFFF).
  
• Background Color - Specify the color for tool-tip background. Color should be specified in RGB format (e.g. #222222).
  
• Border CSS - Specify the CSS for the border around the tool-tip control.
  
• Opacity - Specify the opacity factor (1-100) for the tool-tip control. Lower value means more transparency.
  
• Show Arrow - Setting to show/hide the small arrow on top left corner of the tool-tip.

Additionally, we provide color picker in module settings so that you can pick colors using a nice looking visual control.

Following are a couple of screenshot of module settings page: