BlockSuite API Documentation / @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

whenHoverChange

(isHover, event?) => void

__namedParameters?

WhenHoverOptions

Returns

object

dispose()

dispose: () => void

Returns

void

setFloating()

setFloating: (element?) => void

Parameters

element?

Element

Returns

void

setReference()

setReference: (element?) => void

Parameters

element?

Element

Returns

void

Example

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/affine/components/dist/hover/when-hover.d.ts:36