UWA Class: UWA.Controls.ToolTip

new UWA.Controls.ToolTip(element, content, options)

Add a tool tip to an element on mouseover.

The tooltip, if used in an iFramed widget, will be constrained inside it, "smartly" positionned.

If a DOM element has a "uwa-tooltip" attribute containing some HTML, a tooltip will be displayed when the user hover it with the mouse.

Available Events

Event	Description
`onShowTooltip`	Invoked when tooltip appear
`onHideTooltip`	Invoked when tooltip disappear
`onMoveTooltip`	Invoked when tooltip move

Available CSS Classes

Class name	Description
`light-grey`	Dark text on light background
`dark-grey`	White text on grey background

Example

var myTooltipedLink = widget.createElement('a',{
    text: "my Tooltiped Link"
}).inject(widget.body),

myTooltipContent = 'this is a tooltip with html', // Use UWA.String.stripTags() to remove HTML

myTooltip = new UWA.Controls.ToolTip(myTooltipedLink, myTooltipContent, {
    className: 'dark-grey',
    delay: 200,
    width: 200
});

// Display Tooltip on the top left corner of tooltiped element
myTooltip.show({
    x: '0',
    y: '0'
});


var anotherTooltipedLink = widget.createElement('a', {
    'data-tooltip': 'Hello World!'
});

Parameters

Name Type Description

element

Element

Element which will attached to tooltip position

content

String

Text writted in the tooltip

options

Object

Options hash or a option/value pair

Properties

Name	Type	Argument	Default	Description
`className`	String	<optional>	''	Tooltip container className
`delay`	Number	<optional>	800	Delay before tooltip is shown
`width`	Number	<optional>	'auto'	Width of tooltip in pixel
`showOver`	Boolean	<optional>	true	Display tooltip when mouse is over tooltiped element
`root`	Element	<optional>		The element that will contains the tooltip (default: element offsetParent)

Extends

UWA.Controls.Abstract

Index

Members

name

Members

<protected> name

Properties:

Name	Type	Description
`name`	String	The toolTip name. Default: 'uwa-toolTip'

Methods

buildSkeleton()

Build main dom elements

<protected> _tooltippedIsActive() → {Boolean}

Check if the element focused by the tooltip is currently visible and hover by the mouse

Returns

Type: Boolean

show(position) → {this}

Show tooltip.

Parameters

Name	Type	Description
`position`	Object \| String	Object with x and y property in pixel or String width value center/top/left/right

Returns

Type: this

hide()

Hide tooltip.

toggle()

Toggle visibility of tooltip.

setDelay()

Put a delay before showing tooltip

onShowTooltip(event)

Invoked when tooltip appear.

Parameters

Name	Type	Description
`event`	Event	A mouse-related DOM event

onMoveTooltip(event)

Invoked when tooltip move.

Parameters

Name	Type	Description
`event`	Event	A mouse-related DOM event

onHideTooltip()

Invoked when tooltip disappear.