Class

Tip

kiss.ui.Tip(config)

Display a tip that follows the mouse cursor. The tip is just a floating component that moves with the cursor.

Constructor

# new Tip(config)

You can create a Tip using the class, the shorthand, the HTMLElement "attachTip" method, or the "tip" property of KissJS components:

// Using kiss namespace
new kiss.ui.Tip(config)

// Using the class
new Tip(config)

// Using the shorthand
createTip({
 target: "your_element_id",
 text: "your tip text",
 deltaX: 0,
 deltaY: 20
})

// You can also directly attach a tip to any HTMLElement or KissJS component like this:
myHTMLElementOrKissComponent.attachTip({
 text: "your tip text",
 deltaX: 0,
 deltaY: 20
})

// Finally, KissJS components have a "tip" property to attach a tip automatically:
const myTextField = createField({
 type: "textarea",
 label: "Comments",
 tip: "Please, tell us about what you think"
})

const myButton = createButton({
 icon: "fas fa-rocket",
 tip: "Click to launch the rocket!"
})
Parameters:
Name Type Attributes Description
config object
text string

Tip text

textAlign string <optional>

ex: "center"

target string <optional>

DOM target insertion point

tipConfig.x number <optional>

Optional static x

tipConfig.Y number <optional>

Optional static y

config.deltaX object <optional>

X position difference from the cursor position

config.deltaY object <optional>

Y position difference from the cursor position

config.minWidth object <optional>
config.maxWidth object <optional>

View Source client/ui/elements/tip.js, line 18

this