API > @blocksuite/blocks > whenHover
Function: whenHover ​
whenHover(
whenHoverChange,__namedParameters={}):object
Call the whenHoverChange callback when the element is hovered.
After the mouse leaves the element, there is a 300ms delay by default.
Note: The callback may be called multiple times when the mouse is hovering or hovering out.
See also https://floating-ui.com/docs/useHover
Parameters ​
| Parameter | Type |
|---|---|
whenHoverChange | function |
__namedParameters | WhenHoverOptions |
Returns ​
dispose ​
dispose:
function
Returns ​
void
setFloating ​
setFloating:
function
Parameters ​
| Parameter | Type |
|---|---|
element? | Element |
Returns ​
void
setReference ​
setReference:
function
Parameters ​
| Parameter | Type |
|---|---|
element? | Element |
Returns ​
void
Example ​
ts
private _setReference: RefOrCallback;
connectedCallback() {
let hoverTip: HTMLElement | null = null;
const { setReference, setFloating } = whenHover(isHover => {
if (!isHover) {
hoverTips?.remove();
return;
}
hoverTip = document.createElement('div');
document.body.append(hoverTip);
setFloating(hoverTip);
}, { hoverDelay: 500 });
this._setReference = setReference;
}
render() {
return html`
<div ref=${this._setReference}></div>
`;
}private _setReference: RefOrCallback;
connectedCallback() {
let hoverTip: HTMLElement | null = null;
const { setReference, setFloating } = whenHover(isHover => {
if (!isHover) {
hoverTips?.remove();
return;
}
hoverTip = document.createElement('div');
document.body.append(hoverTip);
setFloating(hoverTip);
}, { hoverDelay: 500 });
this._setReference = setReference;
}
render() {
return html`
<div ref=${this._setReference}></div>
`;
}Defined In ​
packages/blocks/src/_common/components/hover/when-hover.ts:39