Class idx.widget.HoverCard

Extends dijit.TooltipDialog.
HoverCard provides pop-up information that displays when users hover the mouse pointer over an help indicator. HoverCard is implemented according to standard and specification of IBM One UI(tm) Hover Preview Card, Hover Person Card
Defined in: <idx\widget\HoverCard.js>.

Constructor Summary

Constructor Attributes	Constructor Name and Description
	idx.widget.HoverCard()

Field Summary

Field Attributes	Field Name and Description
	actions The items of "actions" listed at bottom left of HoverCard
	draggable draggable: Boolean Toggles the moveable aspect of the HoverCard.
	duration duration: Integer Milliseconds to fade in/fade out
	hideDelay The delay in milliseconds before the HoverCard hides
	moreActions The items of "more action" menu at the bottom right of the HoverCard
	position List of positions to try to position HoverCard, ex: ["after-centered", "before-centered", "below", "above"];
	showDelay The delay in milliseconds before the HoverCard displays
	target target: String\|HTML DOM Id of domNode or domNode to attach the HoverCard to.

Method Summary

Method Attributes	Method Name and Description
	close() Hide the HoverCard or cancel timer for show of HoverCard
	destroy() destroy connection of "_targetConnections" and wrapper node associated with the widget
	enableDnd()
	focus()
	hide(aroundNode) Hide the HoverCard on specified node / area
	onBlur()
	onClose()
	onOtherCardOpen(otherCardTarget)
	open(target) Display the HoverCard
	orient(node, aroundCorner, hoverCardCorner, spaceAvailable, aroundNodeCoords)
	postCreate()
	postMixInProperties()
	show(innerHTML, aroundNode, position, rtl, textDir) Display HoverCard around given node with specified contents.

Constructor Detail

idx.widget.HoverCard()

<!--Preview content of HoverCard-->
<div data-dojo-type="idx.widget._Preview" data-dojo-props='
	id: "preview",
	title: "Preview Card title",
	image: "../../themes/oneui/idx/images/objectImagePlaceholder90px.png",
	content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et purus lorem, eu semper massa. Phasellus rutrum, dui non ultrices convallis, nunc nunc dignissim neque, elementum imperdiet sapien massa ut risus<br /><br />"
'>
</div>
<!--Declaration of Hover Preview Card-->
<div data-dojo-type="idx.widget.HoverCard" 
	data-dojo-props='
		target:"anchor", 
		moreActions:[
			{label: "Item 1", onClick: fClick},
			{label: "Item 2", onClick: fClick},
			{label: "Item 3", onClick: fClick}
		],
		actions: [
			{iconClass: "placeHolderIcon", onClick: fClick, text:""},
			{iconClass: "placeHolderIcon", onClick: fClick, text:""},
			{iconClass: "placeHolderIcon", onClick: fClick, text:""}
		],
		content: "preview"
	'>
</div>

<!--Declaration of Hover Person Card-->
<div dojoType="idx.widget.PersonCard" id="personInfo" query="{email: 'bcaceres@us.ibm.com'}"
url="https://w3-connections.ibm.com/profiles/json/profile.do" jsonp="callback"
spec="photo,fn,title,org,adr.work,tel.work,email.internet,sametime.awareness"
placeHolder="Sametime is not available on your client."></div>

See:: dijit.TooltipDialog

Field Detail

{array} actions

The items of "actions" listed at bottom left of HoverCard

{boolean} draggable

draggable: Boolean Toggles the moveable aspect of the HoverCard. If true, HoverCard can be dragged by it's grippy bar. If false it will remain positioned relative to the attached node

{integer} duration

duration: Integer Milliseconds to fade in/fade out

{integer} hideDelay

The delay in milliseconds before the HoverCard hides

{array} moreActions

The items of "more action" menu at the bottom right of the HoverCard

{array} position

List of positions to try to position HoverCard, ex: ["after-centered", "before-centered", "below", "above"];

{integer} showDelay

The delay in milliseconds before the HoverCard displays

{string} target

target: String|HTML DOM Id of domNode or domNode to attach the HoverCard to. When user hovers over specified dom node, the HoverCard will appear.

Method Detail

close()

Hide the HoverCard or cancel timer for show of HoverCard

destroy()

destroy connection of "_targetConnections" and wrapper node associated with the widget

enableDnd()

focus()

hide(aroundNode)

Hide the HoverCard on specified node / area

Parameters:
{DOM | Object} aroundNode

onBlur()

onClose()

onOtherCardOpen(otherCardTarget)

Parameters:
otherCardTarget

open(target)

Display the HoverCard

Parameters:
target

orient(node, aroundCorner, hoverCardCorner, spaceAvailable, aroundNodeCoords)

Parameters:
node
aroundCorner
hoverCardCorner
spaceAvailable
aroundNodeCoords

postCreate()

postMixInProperties()

show(innerHTML, aroundNode, position, rtl, textDir)

Display HoverCard around given node with specified contents.

Parameters:
{string} innerHTML: Contents of the hoverCard
{DOM | Object} aroundNode: Specifies that hoverCard should be next to this node / area
{string[]} position: List of positions to try to position tooltip (ex: ["right", "above"])
{boolean} rtl: Corresponds to `WidgetBase.dir` attribute, where false means "ltr" and true means "rtl"; specifies GUI direction, not text direction.
{string} textDir: Corresponds to `WidgetBase.textdir` attribute; specifies direction of text.