Brickscore / Elements / 
Tippy

Tippy

Core element
Default
Primary
Secondary
Success
Warning
Danger

Documentation

Tippy provides the logic and optional styling of elements that pop out as a tooltip from the flow of the document and float next to a target element.

Settings

Tippy styling

You can style the background, color, font-family, font-size, padding and border of the tippy to be generated. System fonts are the only fonts available, we are working to be able to set any font.

Element class

Select an element class name to target to apply the tippy.

Text

The content to display in the tooltip.

Show duration

The entrance animation duration of the tooltip. 100 by default.

Hide duration

The exit animation duration of the tooltip. 50 by default.

Arrow

If true, an arrow will be displayed in the tippy pointing out to the element. True by default.

Arrow color

You can also set the color of the arrow outside from the tippy color.

Show delay

The entrance animation delay of the tooltip. 100 by default.

Hide delay

The exit animation delay of the tooltip. 50 by default.

Trigger animation

Wether the animation should be call when hovering or clickling. Mouseenter by default.

Animation

The animation type. You can choose from fade, scale, shift-toward, shift-away and perspective. Fade by default.

Follow cursor

If an option is selected the tippy generated will follow the cursor through the element. True: X & Y axis, Horizontal: X axis, Vertical: Y axis. False by default.

Hide on click

If the user clicks the element once the tippy is generated, it will hide. True by default.

Interactive

If true, the tooltip content can be selectable. True by default.

Max Width

Sets the maximum width the tippy can achieve. None by default.

Placement

Where to generate the tippy regarding the element. Top by default.

zIndex

z-index of the tippy. 9999 by default.

Touch

If true, the tippy can be call by touch events. False by default.

Introduction
Text elementsButton elementsMenu elementsCore elementsFeatures
Need assistance?
*Please feel free to reach us and we will kindly instruct you on the behaviour of any element. You can also reach our community group or take a look at our tutorials.
Don´t miss anything. Join us & build betterJoin Brickscore Community Updates

No spam. Only Brickscore news and showcases

Brickscore 
© 2024 Brickscore. All rights reserved.