Brickscore / Elements /
Tippy
Tippy
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 elementsScroll Reading
Text
Underline Hover
Text
Highlight Hover
Text
Scroll Cascading
Text
Twist Reveal
Text
Letter Launcher
Text
Swap Hover
Text
3D Swap Hover
Text
Typed
Text
Circular Title
Text
Mask Hover
Text
MouseFill Title
Text
Fluid Gradient Title
Infinite Title
Text
Scroll Gradient
Text
Unfold Hover
Text
Counter
Text
Blade Reveal
Text
Inline Images
Text
Unfold Reveal
Text
Scribble Reveal
Text
SVG Reveal
Text
Decode Hover
Text
Decode Reveal
Text
Random Letters
Text
Exchange Title
Text
Blended Hover
Text
Anyside Button
Button
Mask Button
Button
Layer Button
Button
Arrow Button
Button
Crystal Button
Button
Split Button
Button
Ripple Button
Button
Prism Button
Button
Glowing Button
Button
Neumorphic Button
Button
Marquee Button
Button
Microbox Button
Button
Core Burger
Menu
OffCanvas Menu
Menu
Stripe megaMenu
Menu
Multi OffCanvas Menu
Menu
Expanding Menu
Menu
Wrap Menu
Menu
Drawer
Menu
Sticky Header
Menu
Overlay Menu
Menu
Morphing Nav
Menu
Cursor
Core
Smooth Scroll
Core
Custom Scrollbar
Core
Marquee
Core
Grainy
Core
Bubbles
Core
Dark Mode
Core
Tippy
Core
Click & Copy
Core
Flipbox
Core
Media
Core
Spinner
Core
Gradiently
Core
Glowing Card
Core
Observer
Core
Codepen
Core
Motion Divider
Core
Generatorism
Core
Glitchy
Core
Core Tabs
Core
Parallax
Core
Spotlight
Core
Back to Top
Core
Core Slider
Core
Particles
Core
Parallax Hover
Core
Video Sequence
Core
Sharer
Core
Before/After Image
Core
Lottie
Core
Image Reveal
Core
Expanders
Core
Image Hotspots
Core
Zoom Lens
Core
Need assistance?
No spam. Only Brickscore news and showcases
