Hover Box (A JavaScript package)
A simple package to reveal some extra information on hover
Links
Usage
Add the below to your code to your project and you're away
Note: by default, we're listening upon construction
const hb = new HoverBox(".HoverBox");
const hbWithOptions = new HoverBox(".HoverBox", options); // if you have options
// Inside some other functions somewhere
hb.startListening();
hb.stopListening();Options
setMy?: alignment
The part of the popup linked to at
Default: top center
at?: alignment
The part of the anchor setMy will "attach" to
Default: bottom center
keepOpen?: boolean
If the mouse moves into the popup, keep the pop-up open
Default: true
allowHtml?: boolean
The text provided can be treated as safe HTML
Default: false
transitionDelay?: number
The delay before we start the transition (in milliseconds)
Default: 333
transitionDuration?: number
A link to the transition duration (in milliseconds). This must match the CSS transition property or the element
Default: 333
collision?: CollisionHandler
How to handle the popup colliding with the window edge
Default: bestfit
Note: This is just passed straight to the underlying Position module
bestFitPreference?: horizontal OR vertical
The preferred direction to try bestfit first
Default: horizontal
Note: This is just passed straight to the underlying Position module
defaults?: { my: alignment, at: alignment }
The fallback values when only one property is supplied, or the property supplied is invalid
Default: Same as setMy & at respectively
Note: This is just passed straight to the underlying Position module
Types
The Alignment type
The Alignment will allow any of the below, plus a combination in the form vertical horizontal (e.g. top center, bottom right or center left)
topbottomcenterleftright
Using a single value will default the other to center so left == center left
The CollisionHandler type
How to handle any collisions, either:
-
bestFit: find the best fit before trying to flip the element -
flipFit: flip the element completely vertically and horizontally -
ignore: ignore any collisions and just carry on