Class Tooltip

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

Basic usage

         <Tooltip text="You wish!">
           <Button>
             Click for free money!
           </Button>
         </Tooltip>

Example

Use of position and showOnFocus attrs

         <Tooltip text="Woah! That's cool!" position="bottom" showOnFocus>
           <span>3 replies</span>
         </Tooltip>

Example

Incorrect usage

         // This is wrong! Surround the children with a <span> or similar.
         <Tooltip text="This won't work">
           Click
           <a href="/">here</a>
         </Tooltip>

Hierarchy

Constructors

constructor

Properties

attrs childDomNode element firstChild oldText oldVisibility shouldChangeTooltipVisibility shouldRecreateTooltip state

Methods

$ checkDomNodeChanged createTooltip getRealText onbeforeremove onbeforeupdate oncreate oninit onremove onupdate recreateTooltip updateVisibility view component initAttrs

Constructors

constructor

Properties

attrs

attrs: TooltipAttrs

The attributes passed into the component.

See

https://mithril.js.org/components.html#passing-data-to-components

Private childDomNode

childDomNode: null | HTMLElement = null

element

element: Element

The root DOM element for the component.

Private firstChild

firstChild: null | Vnode<any, any> = null

Private oldText

oldText: string = ''

Private oldVisibility

oldVisibility: undefined | boolean

Private shouldChangeTooltipVisibility

shouldChangeTooltipVisibility: boolean = false

Private shouldRecreateTooltip

shouldRecreateTooltip: boolean = false

state

state: undefined

Class component state that is persisted between redraws.

Updating this will not automatically trigger a redraw, unlike other frameworks.

This is different to Vnode state, which is always an instance of your class component.

This is undefined by default.

Methods

$

  • $(selector?): JQuery<HTMLElement>

  • Returns a jQuery object for this component's element. If you pass in a selector string, this method will return a jQuery object, using the current element as its buffer.

    For example, calling component.$('li') will return a jQuery object containing all of the li elements inside the DOM element of this component.

    Parameters

    • Optional selector: string

      a jQuery-compatible selector string

    Returns JQuery<HTMLElement>

    the jQuery object for the DOM node

    Final

Private checkDomNodeChanged

Private createTooltip

Private getRealText

onbeforeremove

onbeforeupdate

oncreate

oninit

onremove

onupdate

Private recreateTooltip

Private updateVisibility

view

Static component

Static initAttrs

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc v0.24.8