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 |
---|---|
Field Summary
Field Attributes | Field Name and Description |
---|---|
The items of "actions" listed at bottom left of HoverCard
|
|
draggable: Boolean
Toggles the moveable aspect of the HoverCard.
|
|
duration: Integer
Milliseconds to fade in/fade out
|
|
The delay in milliseconds before the HoverCard hides
|
|
The items of "more action" menu at the bottom right of the HoverCard
|
|
List of positions to try to position HoverCard, ex: ["after-centered", "before-centered", "below", "above"];
|
|
The delay in milliseconds before the HoverCard displays
|
|
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
|
|
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)
|
|
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.