Hoverable
Mixin

internal

This mixin provides mouse hover tracking.

 class Tracker extends Base.mixin(Hoverable) {
     hoverEnter(leaving) {
         // this.hoverTarget has been entered from "leaving"
         // this.hoverTarget will never be null, but leaving may be null
     }

     hoverLeave(leaving) {
         // this.hoverTarget has been entered from "leaving"
         // this.hoverTarget may be null, but leaving will never be null
     }

     hoverMove(event) {
         // called when a mousemove is made within a hover target
         // this.hoverTarget will never be null
     }
 }

 let tracker = new Tracker({
     hoverRootElement : document.body,
     hoverSelector    : '.hoverable'
 });

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

hoverAnimationCls : String

A CSS class to add to the target element to enable CSS animations. This class is added after calling hoverEnter.
hoverCls : String

A CSS class to add to the target element.
hoverDelay : Number

The number of milliseconds to delay notification of changes in the hoverTarget.
hoverEdgeSize : Number10
When hoverEdges is used, this value determines the size (in pixels) of the edge. When the cursor is within this number of pixels of an edge listed in hoverEdges, the appropriate CSS class is added to the hoverTarget:
- b-hover-top
- b-hover-right
- b-hover-bottom
- b-hover-left
Depending on the values of hoverEdges, it is possible to have at most two of these classes present at any one time (when the cursor is in a corner).
hoverEdges : String

This property is a string containing one character for each edge that is hoverable. For example, a value of "tb" indicates that the top and bottom edges are hoverable.
hoverElement : HTMLElement

private

The current element that the cursor is inside as determined by mouseover and mouseout. Changes in this config trigger re-evaluation of the hoverSelector to determine if there is a hoverTarget.
hoverIgnoreElement : HTMLElement

An element to ignore. Mouse entry into this element will not trigger a change in either of the hoverElement or hoverTarget values.
hoverRootActiveCls : String

A CSS class to add to the root element when there is an active target.
hoverRootCls : String

A CSS class to add to the root element.
hoverRootElement : HTMLElement

The outer element where hover tracking will operate (attach events to it and use as root limit when looking for ancestors).

A common choice for this will be document.body.
hoverSelector : String

A selector for the closest API to determine the actual element of interest. This selector is used to process changes to the hoverElement to determine the hoverTarget.
hoverTarget : HTMLElement

The currently active hover target. This will be the same as hoverElement unless there is a hoverSelector.
hoverTrack : Booleanfalse

Set to true to include tracking of mousemove events for the active hoverTarget. This is required for the hoverMove method to be called.
hoverZone : String

private

A string value containing one character per active edge (e.g., "tr").

Properties

Properties are getters/setters or publicly accessible variables on this class

isHoverable : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of Hoverable class, or subclass thereof.

isHoverable : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of Hoverable class, or subclass thereof.

Functions

Functions are methods available for calling on the class

hoverEnter( leaving )

This method is called when the cursor enters the hoverTarget. The hoverTarget will not be null.
hoverLeave( leaving )

This method is called when the cursor leaves the hoverTarget. The hoverTarget may be null or refer to the new hoverTarget
hoverMove( event )

This method is called when the mouse moves within a hoverTarget, but only if enabled by the hoverTrack config.

Source path

Core/mixin/Hoverable.js

Inheritance tree1

Hoverable

Hoverable Mixin internal