Manual

LiveTooltip

 

 

ROLL MOUSE OVER TO SEE EXAMPLE OF TOOLTIP

 

 

The Tooltip Module is on this page, however invisible to viewers only the person with permission to view and edit may see the Tooltip once logged in.

 

 

Step 1: Add New Tooltip Module

  • Simply add an instance of Live Tooltip module to any page on your portal.
  • Click on "Manage Tooltips" (You must have edit rights to the module or logged in as admin/host to access "Manage Tooltips")
  • Create a new tooltip by providing a tooltip name and clicking on "Add"

Step 2: Add New Tooltip

Tooltip can be assigned to any text or image by creating a link to #LiveTooltip[TooltipName] In the example, it would be #LiveTooltip[Mandeeps]

 

 

Note: #LiveTooltip[TooltipName] syntax is case sensitive

Note:  Add tooltip, save and then click to reload the page in order to get out of the 'Manage Tooltips' area.

 

Step 3:  Connect Tooltip in HTML Module

 

Go to the HTML module on the web page the user desires to add the pop-up to.  DNN Text Editor can be used to easily create links and associate them with Live Tooltip. Simply highlight the text in the editor, click on Hyperlink Manager, and specify the URL as #LiveTooltip[TooltipName]

 

 

After adding Tooltip look below and you will see additional options available.   For Tooltip appearance click the Behavior tab.

  • Show Options include

    On Mouseover - Tooltip shows when the mouse is hovered over the target

    On Click - Tooltip shows when the target element is clicked

    On Focus - Tooltip is shown when target element comes into focus

  • Solo:  When clicked shows a single Tooltip on the page by closing all other visible Tooltips on the page.
  • Auto Launch:  When checked will launch the Tooltip automatically when the page is loaded and the user will need to close the window before viewing the web page, if checked make sure to also check the Close Button.
  • Delay:  Allows the user to specify time in milliseconds to delay hiding of the Tooltip.

Effects are also available under the Effect tab:  No Effect, Fade In/Out, and Slide Up/Down