@operato/data-grist 2.0.0-beta.12 → 2.0.0-beta.13

package/src/data-grid/data-grid-body.ts

@@ -545,6 +545,10 @@ export class DataGridBody extends LitElement {
       const opacity = selectBlock.style.opacity
 
       selectBlock.setAttribute('data-tooltip', 'copied to clipboard!')
+      const rect = selectBlock.getBoundingClientRect()
+      selectBlock.style.setProperty('--tooltip-top', `${rect.top}px`)
+      selectBlock.style.setProperty('--tooltip-left', `${rect.left}px`)
+
       selectBlock.style.backgroundColor = 'red'
       selectBlock.style.opacity = '0.5'
       await sleep(500)

package/src/data-grid/data-grid-field.ts

@@ -3,10 +3,10 @@ import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { TooltipStyles } from '@operato/styles'
+import { TooltipReactiveController } from '@operato/utils'
 
 import { ZERO_COLUMN } from '../configure/zero-config'
 import { ColumnConfig, GristRecord } from '../types'
-import { getRenderer } from '../renderers'
 
 const DEFAULT_TEXT_ALIGN = 'left'
 
@@ -103,6 +103,8 @@ export class DataGridField extends LitElement {
   private _onFieldChange: (e: Event) => void = e => {}
   private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}
 
+  private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)
+
   render(): TemplateResult {
     if (!this.column) {
       return html``

package/src/data-grid/data-grid-header.ts

@@ -8,7 +8,7 @@ import throttle from 'lodash-es/throttle'
 
 import { OxPopup } from '@operato/popup'
 import { TooltipStyles } from '@operato/styles'
-import { closestElement, detectOverflow } from '@operato/utils'
+import { TooltipReactiveController, closestElement } from '@operato/utils'
 
 import { ZERO_COLUMNS, ZERO_DATA } from '../configure/zero-config'
 import { FilterStyles } from '../filters/filter-styles'
@@ -163,6 +163,8 @@ export class DataGridHeader extends LitElement {
   private _lastAccVal?: number
   private _throttledNotifier?: any
 
+  private tooltipController?: TooltipReactiveController = new TooltipReactiveController(this)
+
   connectedCallback() {
     super.connectedCallback()
 
@@ -232,19 +234,9 @@ export class DataGridHeader extends LitElement {
       >
         <span
           for-title
+          data-reactive-tooltip
           style="text-align:${align || column.record.align || 'left'};"
           @click=${(e: MouseEvent) => this._changeSort(column)}
-          @mouseover=${(e: MouseEvent) => {
-            const element = e.target as HTMLSpanElement
-
-            if (detectOverflow(element)) {
-              element.setAttribute('data-tooltip', element.textContent!.trim())
-            }
-          }}
-          @mouseout=${(e: MouseEvent) => {
-            const element = e.target as HTMLSpanElement
-            element.removeAttribute('data-tooltip')
-          }}
           >${this._renderHeader(column)}
         </span>
 

package/src/renderers/ox-grist-renderer-json5.ts

@@ -11,6 +11,10 @@ function onmouseover(e: Event) {
   } catch {}
 
   element.setAttribute('data-tooltip', JSON5.stringify(parsed, null, 2))
+
+  const rect = element.getBoundingClientRect()
+  element.style.setProperty('--tooltip-top', `${rect.top + rect.height}px`)
+  element.style.setProperty('--tooltip-left', `${rect.left}px`)
 }
 
 function onmouseout(e: Event) {

package/src/renderers/ox-grist-renderer-text.ts

@@ -1,21 +1,9 @@
 import { html } from 'lit'
 
-import { detectOverflow, format as formatter } from '@operato/utils'
+import { format as formatter } from '@operato/utils'
 
 import { FieldRenderer } from '../types'
 
-function onmouseover(e: Event) {
-  const element = e.target as HTMLSpanElement
-  if (detectOverflow(element)) {
-    element.setAttribute('data-tooltip', element.textContent!)
-  }
-}
-
-function onmouseout(e: Event) {
-  const element = e.target as HTMLSpanElement
-  element.removeAttribute('data-tooltip')
-}
-
 export const OxGristRendererText: FieldRenderer = (value, column, record, rowIndex, field) => {
   var { format } = column.record || {}
 
@@ -24,5 +12,5 @@ export const OxGristRendererText: FieldRenderer = (value, column, record, rowInd
     text = formatter(format, text)
   }
 
-  return html`<span @mouseover=${onmouseover} @mouseout=${onmouseout}>${text}&nbsp;</span>`
+  return html`<span data-reactive-tooltip>${text}&nbsp;</span>`
 }