Module: alfresco/misc/AlfTooltip

alfresco/misc/AlfTooltip

This widget provides a way in which a widget model can be displayed when the mouse moves over another widget. To use this tooltip you need to define a widgets model to immediately render and then another widget model that will be displayed in the tooltip when the mouse moves over any of the widgets in the first model.

Author:
  • Dave Draper
  • Martin Doyle
Copyright:
  • Copyright (C) 2005-2020 Alfresco Software Limited
License:
Source:

Examples

Example configuration:

{
   name: "alfresco/layout/ClassicWindow",
   config: {
   title: "Tooltip displays on mouse over logo",
   widgets: [
      {
         name: "alfresco/misc/AlfTooltip",
         config: {
            widgets: [
               {
                  name: "alfresco/logo/Logo"
               }
            ],
            widgetsForTooltip: [
               {
                  name: "alfresco/html/Label",
                  config: {
                     label: "This is the tooltip content"
                  }
               }
            ]
         }
      }
   ]
}

Example configuration with longer delay before displaying:

{
   name: "alfresco/layout/ClassicWindow",
   config: {
   title: "Tooltip displays on mouse over logo",
   widgets: [
      {
         name: "alfresco/misc/AlfTooltip",
         config: {
            mouseoverShowDelay: 1000,
            widgets: [
               {
                  name: "alfresco/logo/Logo"
               }
            ],
            widgetsForTooltip: [
               {
                  name: "alfresco/html/Label",
                  config: {
                     label: "This is the tooltip content"
                  }
               }
            ]
         }
      }
   ]
}

Example configuration using a click event rather than hover and width styling:

{
   name: "alfresco/layout/ClassicWindow",
   config: {
   title: "Tooltip displays on mouse over logo",
   widgets: [
      {
         name: "alfresco/misc/AlfTooltip",
         config: {
            widgets: [
               {
                  name: "alfresco/logo/Logo"
               }
            ],
            widgetsForTooltip: [
               {
                  name: "alfresco/html/Label",
                  config: {
                     label: "This is the tooltip content"
                  }
               }
            ],
            triggeringEvent: "click",
            tooltipStyle: "width: 350px;"
         }
      }
   ]
}

Extends

Mixes In

Members

_hideTooltipTimeout :number

The pointer for the timeout that will hide a tooltip
Type:
  • number
Default Value:
  • 0
Source:

_showTooltipTimeout :number

The pointer for the timeout that will display a tooltip
Type:
  • number
Default Value:
  • 0
Source:

_tooltip :object

A reference to the dijit/TooltipDialog that will be created.
Type:
  • object
Default Value:
  • null
Source:

anchorSelector :string

This is an optional CSS selector that can be provided to identify a child node that the tooltip should be anchored to. Ideally this should only match a single node, but if it matches multiple nodes then the first result will be used. This selector is only used within the DOM that descends from this widget - not across the entire page.

PLEASE NOTE: Use of this attribute is potentially fragile depending upon the selector used - there are no guarantees that the CSS classes or HTML structure of widgets will not change between releases of Aikau! It is strongly recommended that if future proof selectors are required that feature requests are made to add them.

Type:
  • string
Since:
  • 1.0.71
Default Value:
  • null
Source:

mouseoutHideDelay :number

How long (ms) to delay hiding the tooltip on mouseover-triggered tooltips.
Type:
  • number
Default Value:
  • 250
Source:

mouseoverShowDelay :number

How long (ms) to delay displaying the tooltip on mouseover-triggered tooltips.
Type:
  • number
Default Value:
  • 250
Source:

orientation :string[]

An optional array of the orientation preferences for the tooltip. An example configuration might be ["below-centered", "above-centered"] for example.
Type:
  • string[]
Since:
  • 1.0.71
Default Value:
  • null
Source:

templateString :String

The HTML template to use for the widget.
Type:
  • String
Source:

tooltipStyle :string

The style to be applied to the tooltip. Default is null.
Type:
  • string
Default Value:
  • null
Source:

triggeringEvent :string

The Javascript "dojo/on" event to listen for. Default is mouseover.
Type:
  • string
Default Value:
  • "mouseover"
Source:

widgets :array

This is the widget model that will be immediately rendered. When the mouse is moved over any of the widgets in this model then the tooltip will be created (if it hasn't previously been created) and will then be displayed.
Type:
  • array
Default Value:
  • null
Source:

widgetsForTooltip :array

This is the widget model that will be displayed inside the tooltip.
Type:
  • array
Default Value:
  • null
Source:

Methods

hideTooltip()

Called to hide the tooltip. This is done when the mouse leaves the target area by default.
Source:

onMouseout()

Handle mousing-out of the widget.
Source:

onMouseover()

Handle mousing-over the widget.
Source:

onTooltipMouseEnter()

Handle mousing-over the tooltip.
Source:

onTooltipMouseLeave()

Handle mousing-out of the tooltip.
Source:

postCreate()

Sets up the mouse over listener for displaying the tooltip (if [widgetsForTooltip]{@link module:alfresco/misc/AlfTooltipDialog#widgetsForTooltip} contains a widget model) and then processes [widgets]{@link module:alfresco/misc/AlfTooltipDialog#widgets}.
Source:

resize(dimensions)

The tooltip needs to take responsibility for delegating any resize requests that its child widgets would usually get if they were not contained within the tooltip. This is particularly important when widgets are placed in a grid that will request to resize those widgets. Without this delegation the widgets intended to be resized will stay their original size. If the widget does not have a resize function then its DOM node will be resized. If the widget has mixed in the ResizeMixin then its alfPublishResizeEvent will be called.
Parameters:
Name Type Description
dimensions object The object containing the width and height for the widget.
Since:
  • 1.0.47
Source:

showTooltip()

This is called to display the tooltip. If the tooltip hasn't been created at this point then it will be created.
Source: