Tooltip
Extends:
The Tooltip
component is used to create a tooltip for an element. It
requires a single child element to be passed to it. Passing multiple
children or fragments will throw an error.
You should use this for any tooltips you create to allow for backwards compatibility when we switch to another tooltip library instead of Bootstrap tooltips.
If you need to pass multiple children, surround them with another element,
such as a <span>
or <div>
.
Note: this component will overwrite the title
attribute of the first
child you pass to it, as this is how the current tooltip system works in
Flarum. This shouldn't be an issue if you're using this component correctly.
Example:
<Tooltip text="You wish!">
<Button>
Click for free money!
</Button>
</Tooltip>
<Tooltip text="Woah! That's cool!" position="bottom" showOnFocus>
<span>3 replies</span>
</Tooltip>
// This is wrong! Surround the children with a <span> or similar.
<Tooltip text="This won't work">
Click
<a href="/">here</a>
</Tooltip>
Member Summary
Public Members | ||
public |
childDomNode: * |
|
public |
firstChild: * |
|
public |
oldText: * |
|
public |
|
|
public |
|
|
public |
|
Method Summary
Public Methods | ||
public |
Checks if the tooltip DOM node has changed. |
|
public |
|
|
public |
getRealText(): * |
|
public |
oncreate(vnode: *) |
|
public |
onupdate(vnode: *) |
|
public |
|
|
public |
|
|
public |
view(vnode: *): * |
Public Members
public childDomNode: * source
public firstChild: * source
public oldText: * source
public oldVisibility: * source
public shouldChangeTooltipVisibility: * source
public shouldRecreateTooltip: * source
Public Methods
public checkDomNodeChanged() source
Checks if the tooltip DOM node has changed.
If it has, it updates this.childDomNode
to the new node, and sets
shouldRecreateTooltip
to true
.
public createTooltip() source
public oncreate(vnode: *) source
Params:
Name | Type | Attribute | Description |
vnode | * |
public onupdate(vnode: *) source
Params:
Name | Type | Attribute | Description |
vnode | * |