A simple package to reveal some extra information on hover
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();
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
If the mouse moves into the popup, keep the pop-up open
Default: true
The text provided can be treated as safe HTML
Default: false
The delay before we start the transition (in milliseconds)
Default: 333
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
The preferred direction to try bestfit
first
Default: horizontal
Note: This is just passed straight to the underlying Position module
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
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
)
top
bottom
center
left
right
Using a single value will default the other to center
so left
== center left
How to handle any collisions, either:
bestFit
: find the best fit before trying to flip the elementflipFit
: flip the element completely vertically and horizontallyignore
: ignore any collisions and just carry on