BlockSuite API Documentation / @blocksuite/blocks / Tooltip
Class: Tooltip
Example
// Simple usage
html`
<affine-tooltip>Content</affine-tooltip>
`
// With placement
html`
<affine-tooltip tip-position="top">
Content
</affine-tooltip>
`
// With custom properties
html`
<affine-tooltip
.zIndex=${0}
.offset=${4}
.autoFlip=${true}
.arrow=${true}
.tooltipStyle=${css`:host { z-index: 0; --affine-tooltip: #fff; }`}
.allowInteractive=${false}
>
Content
</affine-tooltip>
`
Extends
LitElement
Constructors
new Tooltip()
new Tooltip():
Tooltip
Returns
Inherited from
LitElement.constructor
Defined in
node_modules/.pnpm/@[email protected]/node_modules/@lit/reactive-element/development/reactive-element.d.ts:504
Other
allowInteractive
Allow the tooltip to be interactive. eg. allow the user to select text in the tooltip.
Defined in
packages/affine/components/dist/toolbar/tooltip.d.ts:45
arrow
Show a triangle arrow pointing to the reference element.
Defined in
packages/affine/components/dist/toolbar/tooltip.d.ts:49
autoFlip
changes the placement of the floating element in order to keep it in view, with the ability to flip to any placement.
See https://floating-ui.com/docs/flip
Defined in
packages/affine/components/dist/toolbar/tooltip.d.ts:56
hoverOptions
Defined in
packages/affine/components/dist/toolbar/tooltip.d.ts:57
offset
Default is 4px
See https://floating-ui.com/docs/offset
Defined in
packages/affine/components/dist/toolbar/tooltip.d.ts:63
placement
Defined in
packages/affine/components/dist/toolbar/tooltip.d.ts:64
tooltipStyle
Defined in
packages/affine/components/dist/toolbar/tooltip.d.ts:65
zIndex
Defined in
packages/affine/components/dist/toolbar/tooltip.d.ts:66
getPortal()
getPortal():
undefined
|HTMLDivElement
Returns
undefined
| HTMLDivElement
Defined in
packages/affine/components/dist/toolbar/tooltip.d.ts:40
lifecycle
connectedCallback()
connectedCallback():
void
Invoked when the component is added to the document's DOM.
In connectedCallback()
you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.
connectedCallback() {
super.connectedCallback();
addEventListener('keydown', this._handleKeydown);
}
Typically, anything done in connectedCallback()
should be undone when the element is disconnected, in disconnectedCallback()
.
Returns
void
Overrides
LitElement.connectedCallback
Defined in
packages/affine/components/dist/toolbar/tooltip.d.ts:39
styles
styles
static
styles:CSSResult
Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.
Note on Content Security Policy:
Element styles are implemented with <style>
tags when the browser doesn't support adopted StyleSheets. To use such <style>
tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value>
with <base64-value>
replaced be a server-generated nonce.
To provide a nonce to use on generated <style>
elements, set window.litNonce
to a server-generated nonce in your page's HTML, before loading application code:
<script>
// Generated and unique per request:
window.litNonce = 'a1b2c3d4';
</script>
Nocollapse
Overrides
LitElement.styles
Defined in
packages/affine/components/dist/toolbar/tooltip.d.ts:35