@spectric/ui 0.0.10 → 0.0.12

package/src/components/table/table.css

@@ -1,24 +1,61 @@
 spectric-table{
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+}
+spectric-table .table-wrapper{
+    overflow: auto;
+    flex-grow: 1;
+    position: relative;
 }
 spectric-table tr{
     text-align: center;
 }
 
-spectric-table-body tr:hover{
+spectric-table tr.odd{
+    background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 90%);
+}
+spectric-table tr:hover{
     background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 70%)
 }
 spectric-table-header{
     display: table-header-group;
     font-weight: bold;
+    position: sticky;
+    top: 0px;
+    left: 0px;
+    z-index: 1;
+    background: var(--spectric-background, #ffffff);
+}
+spectric-table-header td {
+    vertical-align: middle;
+}
+spectric-table tr {
+    line-height: var(--rowHeight);
+}
+spectric-table td{
+   height: var(--rowHeight);
+}
+spectric-table-header .header-contents {
+    position: relative;
+}
+
+spectric-table-header .header-contents .sort-direction {
+    position: absolute;
+    right: 0;
+}
+spectric-table-header .header-contents.sortable {
+    cursor: pointer;
+}
+spectric-table-header .header-contents.sortable:hover .sort-direction.none::before
+ {
+    content: "\2B81";
 }
 spectric-table div[role="table"]{
     display: table;
+    min-width: 100%;
 }
-spectric-table-body {
-    display: table-row-group;
-}
+
 spectric-table-cell{
     display: contents;
     vertical-align: middle;
@@ -43,4 +80,23 @@ spectric-table-cell .table-cell-actions{
 }
 spectric-table-cell td:hover .table-cell-actions{
     visibility: unset;
+}
+spectric-table .table-checkbox-single spectric-button{
+    --button-border-radius: 50%;
+}
+spectric-input.table-checkbox-single[checked] spectric-button{
+    --text-on-color: transparent;
+    border-radius: 50%;
+    position: relative;
+}
+spectric-input.table-checkbox-single[checked] spectric-button::before {
+    position: absolute;
+    content: " ";
+    height: 50%;
+    width: 50%;
+    left: 25%;
+    top: 25%;
+    border-radius: 50%;
+    z-index: 1;
+    box-shadow: 0px 0px 0px 4px var(--input-color);
 }

package/src/components/table/table.ts

@@ -1,34 +1,68 @@
-import { html, LitElement, TemplateResult } from 'lit';
+import { html, LitElement, PropertyValues, render, TemplateResult } from 'lit';
 import "../pagination";
 import "./header"
 import "./body"
 import { customElement, property, state, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import "./virtualBody"
 import "./table.css"
 export const TableElementTag = "spectric-table"
 import { spreadProps } from '../../utils/spread';
 import { PaginationChangeProps, PaginationProps } from '../pagination';
 import { FilterEvent } from './cell';
+import { createSortChain } from './sorting';
+
 export type { TableProps, TableEvents }
 
 export type DomRenderable = HTMLElement | TemplateResult | string | number | null
+export enum TableSelectOptions {
+    multi = "multi",
+    single = "single",
+    none = "none"
+}
 
+export enum TableSortOption {
+    multi = "multi",
+    single = "single",
+}
+export type TableSortOptionTypes = `${TableSortOption}`
+export enum TableSortDirection {
+    ascending = "ascending",
+    decending = "decending",
+    none = "none"
+}
+export type TableSortDirectionTypes = `${TableSortDirection}`
 export type ColumnSettings<T> = {
     width?: number
     whiteSpace?: "nowrap";
     hidden?: boolean
     sortable?: boolean
+    sortDirection?: TableSortDirectionTypes
     filterable?: boolean
     title?: DomRenderable
+    /**
+     * Key to used for getting data from an object for a cell 
+     */
     key?: string
-    render?: (row: T, table: TableElement<T>) => DomRenderable
+    /**
+     * Render function to render a table cell for displaying custom html
+     */
+    render?: (row: T, index: number, table: TableElement<T>) => DomRenderable
+    /**
+     * Custom comparator function for sorting
+     */
+    compareFn?: ((a: T, b: T) => number) | undefined
 }
-type TableSelectOptions = "multi" | "single"
-interface TableProps<T> {
+export type TableSelectOptionsTypes = `${TableSelectOptions}`
+export interface TableDataOptions<T> {
     pagination?: PaginationProps
     columns: ColumnSettings<T>[]
+}
+interface TableProps<T> extends TableDataOptions<T> {
     data: T[]
-    select?: TableSelectOptions
+    select: TableSelectOptionsTypes
+    sort?: TableSortOptionTypes
+    rowHeight?: number
 }
 
 type DomEvent<T> = Event & {
@@ -37,30 +71,90 @@ type DomEvent<T> = Event & {
 /**
  * React example
  * <iframe  width="100%" height="400px" src="https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1"/>
- * 
+ *
  */
 @customElement(TableElementTag)
 export class TableElement<T> extends LitElement implements TableProps<T> {
     @property({ type: Array, attribute: false })
     data: T[] = [];
     @property({ type: Object, attribute: false })
-    pagination?: PaginationProps | undefined;
+    pagination?: PaginationProps;
     @property({ attribute: false })
     columns: ColumnSettings<T>[] = [];
-    @property({ type: String, reflect: false })
-    select?: TableSelectOptions;
+    @property({ type: String, reflect: true })
+    select: TableSelectOptionsTypes = TableSelectOptions.none;
+    @property({ type: String, reflect: true })
+    sort: TableSortOptionTypes = TableSortOption.single;
+
+    /**
+     * Needed for virtualization 
+     */
+    @property({ type: Number, reflect: true })
+    rowHeight: number = 25;
+
+    static getDefaultDataSorterAndPaginatior<T>(data: T[]) {
+        return (props: TableDataOptions<T>) => {
+            let sorts = props.columns.filter(column => column.sortable && column.sortDirection && column.sortDirection !== TableSortDirection.none)
+            let rows = [...data] // Need to copy the array to prevent mutating the ordering of the original data
+            if (sorts.length) {
+                let sortChain = createSortChain(sorts)
+                rows.sort((a, b) => {
+                    for (let sort of sortChain) {
+                        let result = sort(a, b)
+                        if (result) {
+                            return result
+                        }
+                    }
+                    return 0
+                })
+            }
+
+            if (!props.pagination) {
+                return rows
+            }
+            let { page, pageSize } = props.pagination
+            if (!page || !pageSize) {
+                return rows
+            }
+            return !props.pagination ? rows : rows.slice((page - 1) * pageSize, (page) * pageSize)
+        }
+    }
+
     private _handlePaginationChange = (e: CustomEvent<PaginationChangeProps>) => {
         e.preventDefault()
         e.stopPropagation()
         if (this.pagination) {
-            this.pagination.size
-            this.pagination = { ...this.pagination, ...e.detail }
+            let pagination = { ...this.pagination, ...e.detail }
+
+            let { totalItems, page, pageSize } = pagination
+            if (totalItems && page && pageSize && ((page - 1) * pageSize) > totalItems) {
+                pagination.page = 1
+            }
+            this.pagination = pagination
         }
         this._emitChange()
     };
+    private _handleSortChange = (e: CustomEvent<ColumnSettings<T>>) => {
+        let columnSetting = e.detail
+        let column = this.columns.find(col => col.key == columnSetting.key)
+        if (!column) {
+            console.warn("Unable to find sort column")
+            return
+        }
+        if (this.sort == TableSortOption.single) {
+            //Single column sort so we reset the sort direction for all columns
+            this.columns.forEach(col => {
+                col.sortDirection = TableSortDirection.none
+            })
+        }
+        column.sortDirection = columnSetting.sortDirection;
+        this.columns = [...this.columns]
+        this._emitChange()
+    }
+
     private _emitChange = () => {
-        let { pagination } = this
-        this.dispatchEvent(new CustomEvent<{ pagination?: PaginationChangeProps }>("change", { detail: { pagination } }))
+        let { pagination, columns } = this
+        this.dispatchEvent(new CustomEvent<TableDataOptions<T>>("change", { detail: { pagination, columns } }))
     }
     //@ts-ignore
     private __DO_NOT_USE_filter = () => {
@@ -68,7 +162,7 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter"))
     }
     @state()
-    selected: T[] = [];
+    private selected: T[] = [];
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
@@ -79,38 +173,60 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
         } else {
             this.selected = []
         }
-        this.dispatchEvent(new CustomEvent("select", { detail: this.selected }))
+        this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
+    }
+    protected update(changedProperties: PropertyValues): void {
+        if (changedProperties.has("select")) {
+            if (this.select === "single" && this.selected.length > 1) {
+                this.selected = [this.selected[0]]
+                this.dispatchEvent(new CustomEvent("selected", { detail: [...this.selected] }))
+            }
+        }
+        super.update(changedProperties)
     }
     protected render(): unknown {
         let columns = this.columns.filter(column => !column.hidden)
-        if (this.select) {
+        if (this.select !== TableSelectOptions.none) {
             columns.unshift({
                 title: this.select === "multi" ? html`<spectric-input variant="checkbox" @change=${this._handleSelectAllChange} .helperText=${"Select All"}></spectric-input>` : null,
                 render: (row) => {
-                    return html`<spectric-input variant="checkbox" .checked=${this.selected.includes(row)} @change=${(e: DomEvent<HTMLInputElement>) => {
+                    let container = document.createElement("div")
+                    let checked = this.selected.includes(row)
+                    let template = html`<spectric-input variant="checkbox" class="table-checkbox-${this.select}" ${spreadProps({ checked })}  @change=${(e: DomEvent<HTMLInputElement>) => {
                         e.stopPropagation()
-                        if (this.select === "single") {
-                            this.selected = []
+                        let index = this.selected.findIndex(value => value === row)
+                        if (e.target.checked && index !== -1) {
+                            return
+                        }
+                        else if (!e.target.checked && index === -1) {
+                            return
+                        }
+                        else if (!e.target.checked && index !== -1) {
+                            this.selected.splice(index, 1)
                         }
                         if (e.target.checked) {
-                            this.selected.push(row)
-                            this.dispatchEvent(new CustomEvent("select", { detail: this.selected }))
-                        } else {
-                            let index = this.selected.findIndex(value => value === row)
-                            if (index !== -1) {
-                                this.selected.splice(index, 1)
-                                this.dispatchEvent(new CustomEvent("select", { detail: this.selected }))
+                            if (this.select === "single") {
+                                this.selected = []
                             }
+                            this.selected.push(row)
                         }
+                        this.dispatchEvent(new CustomEvent("selected", { detail: [...this.selected] }))
                     }}></spectric-input>`
+                    render(template, container)
+                    return template
                 }
             })
         }
-
+        const tdBorderAndPadding = 4;
         return html`
-        <div role="table">
-            <spectric-table-header .columns=${columns}></spectric-table-header>
-            <spectric-table-body .columns=${columns} .data=${this.data} .table=${this}></spectric-table-body>
+        <div class="table-wrapper" style="--rowHeight:${this.rowHeight - tdBorderAndPadding}px">
+            <div role="table">
+                <spectric-table-header .columns=${columns} @sortChange=${this._handleSortChange}></spectric-table-header>
+                ${this.rowHeight >= 25 && this.data.length >= 100 ?
+                html`<spectric-table-virtual-body .columns=${columns} .data=${this.data} .table=${this} .rowHeight=${this.rowHeight}></spectric-table-virtual-body>` :
+                html`<spectric-table-body .columns=${columns} .data=${this.data} .table=${this}></spectric-table-body>`
+            }
+            </div>
         </div>
         ${this.pagination ? html`<spectric-pagination ${spreadProps(this.pagination)} @change=${this._handlePaginationChange}></spectric-pagination>` : null}
         `;
@@ -118,7 +234,7 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
 }
 
 interface TableEvents {
-    'change': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
+    'change': (event: CustomEvent<TableDataOptions<any>>) => void;
     'filter': (event: CustomEvent<FilterEvent<any>>) => void;
 }
 
@@ -130,7 +246,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link TableElement}
              */
             [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
         }
@@ -139,7 +255,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link TableElement}
                  */
                 [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>
             }

package/src/components/table/virtualBody.css

@@ -0,0 +1,13 @@
+spectric-table-body {
+    display: table-row-group;
+}
+spectric-table-virtual-body {
+    display: contents;
+}
+
+
+
+spectric-table-virtual-body .virtual-scroll-spacer td {
+    padding: 0;
+    border: 0px;
+}

package/src/components/table/virtualBody.ts

@@ -0,0 +1,127 @@
+import { html } from 'lit';
+import { customElement, property, } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+export const TableBodyElementTag = "spectric-table-virtual-body"
+import "./cell"
+import { ColumnSettings, TableElement } from './table';
+import { repeat } from 'lit/directives/repeat.js';
+import { DisposableElement } from '../../classes/DisposibleElement';
+import "./virtualBody.css"
+interface BodyProps<T> {
+    columns: ColumnSettings<T>[]
+    data: T[]
+    rowHeight: number
+}
+
+
+/**
+ * Table Body Element
+ */
+@customElement(TableBodyElementTag)
+export class TableVirtualBodyElement<T> extends DisposableElement implements BodyProps<T> {
+    @property({ type: Array, attribute: false })
+    data: T[] = [];
+    @property({ type: Array, attribute: false })
+    columns: ColumnSettings<T>[] = [];
+    @property({ type: Number, attribute: false })
+    rowHeight: number = 30;
+
+    @property({ type: Number, state: true })
+    startIndex: number = 0
+
+    table!: TableElement<T>
+    constructor() {
+        super()
+        this.addDisposableListener(() => this.table.querySelector(".table-wrapper")!, "scroll", () => {
+            const scrollTop = this.table.querySelector(".table-wrapper")!.scrollTop;
+            requestAnimationFrame(() => {
+                this.startIndex = Math.floor(scrollTop / this.rowHeight);
+            })
+        })
+    }
+    protected firstUpdated(): void {
+        this.columns.forEach(col => {
+            if (!col.width) {
+                console.warn("When using virtual scrolling it is recomended to set the width of the columns to prevent columns widths from jittering during scroll")
+            }
+        })
+    }
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
+    }
+    protected render(): unknown {
+        let totalRows = this.data.length
+        let buffer = 10 // Have a buffer of rows to prevent column jitter
+        let headerHeight = this.table.querySelector("spectric-table-header")!.clientHeight
+        let viewport = this.table.querySelector(".table-wrapper")!
+        let startIndex = Math.max(this.startIndex - buffer, 0) //pad the front with 10 rows
+        const rowsThatFit = Math.ceil((viewport.clientHeight - headerHeight) / this.rowHeight);
+        const endIndex = Math.min(startIndex + rowsThatFit + buffer, totalRows);
+        const visibleRows = endIndex - startIndex
+        let totalHeight = totalRows * this.rowHeight
+        let beforeHeight = (startIndex * this.rowHeight) + (viewport.scrollTop - (startIndex * this.rowHeight))
+        if (endIndex === totalRows) {
+            beforeHeight = (startIndex * this.rowHeight)
+        }
+        let visibleHeight = (visibleRows * this.rowHeight)
+        let afterHeight = totalHeight - beforeHeight - visibleHeight
+        let spacerElementBefore = this.startIndex != 0 ? html`
+                <tr style="height:${beforeHeight}px" class="virtual-scroll-spacer">
+                    <td colspan="${this.columns.length}"></td></tr>` : null
+
+        let spacerElementAfter = html`
+                <tr style="height:${afterHeight}px" class="virtual-scroll-spacer">
+                    <td colspan="${this.columns.length}"></td></tr>`
+        return html`
+          <div style="height:${totalHeight}px;position: absolute;overflow-x: hidden;overflow-y: hidden;z-index:-1;width:1px;"></div>
+          <tbody>
+            ${spacerElementBefore}
+            </tbody>
+          <div style="display:table-row-group;max-height:${visibleHeight}px; overflow:hidden;">
+
+              ${repeat(this.data.slice(Math.max(startIndex, 0), endIndex), (row, index) => html`
+              <tr class="${(index + startIndex) % 2 === 0 ? "odd" : ""}">
+                  ${repeat(this.columns, (col) => {
+            return html`<spectric-table-cell .column=${col} .row=${row} .index=${index + startIndex} .columns=${this.columns}></spectric-table-cell>`
+        })}
+              </tr>`)
+            }
+              </div>
+    <tbody>
+                ${afterHeight > 0 ? spacerElementAfter : null}
+</tbody>
+
+    `
+
+    }
+
+}
+
+interface TableBodyEvents {
+    //'sort': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO sort events
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableBodyElementTag]: HTMLElementTagWithEvents<TableVirtualBodyElement<any>, TableBodyEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableVirtualBodyElement<any>, BodyProps<any>, TableBodyEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableVirtualBodyElement<any>, BodyProps<any>, TableBodyEvents>
+            }
+        }
+    }
+}

package/src/components/tooltip/tooltip.ts

@@ -3,8 +3,9 @@ import { customElement, property } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import "./tooltip.css"
 export const TooltipElementTag = "spectric-tooltip"
-import { css, CSSResultGroup, html, LitElement, render } from "lit-element";
+import { css, CSSResultGroup, html, render } from "lit-element";
 import { DomRenderable } from "../table";
+import { DisposableElement } from '../../classes/DisposibleElement';
 export type { TooltipProps, TooltipEvents }
 export enum TooltipPostions {
     top = "top",
@@ -19,11 +20,11 @@ interface TooltipProps {
     /**
      * How long you need to hover before the tooltip displays
      */
-    delay: number;
+    delay?: number;
     /**
      * How long the fade in animation should run
      */
-    animationDuration: number;
+    animationDuration?: number;
     /**
      * Tooltip contents
      */
@@ -31,18 +32,18 @@ interface TooltipProps {
     /**
      * Where to anchor the tooltip
      */
-    position: TooltipPostionsTypes
+    position?: TooltipPostionsTypes
     /**
-     * Sets a max width for the contents (default:300) you can disable this by setting to 0 or -1
+     * Sets a max width for the contents you can disable this by setting to 0 or -1
      */
     maxWidth?: number
     /**
-     * Container the tool tip will be attached to. (default:document.body)
+     * Container the tool tip will be attached to. 
      */
     portalTarget?: HTMLElement
 
     /** 
-     * The element that triggers the tooltip. (default:node.parentElement) This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element
+     * The element that triggers the tooltip. This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element
      */
     triggerTarget?: HTMLElement
 }
@@ -51,7 +52,7 @@ interface TooltipProps {
  * Spectric tooltip will add a tooltip to any container 
  */
 @customElement(TooltipElementTag)
-export class TooltipElement extends LitElement implements TooltipProps {
+export class TooltipElement extends DisposableElement implements TooltipProps {
     @property({ type: Number, reflect: true })
     delay: number = 100;
     @property({ type: Number, reflect: true })
@@ -72,25 +73,26 @@ export class TooltipElement extends LitElement implements TooltipProps {
     portalTarget: HTMLElement = document.body
     private timer?: number;
     private open: boolean = false;
-    mouseframe?: number;
+    private mouseframe?: number;
+    /**
+     * @default parentElement
+     */
     @property({ attribute: false })
-    triggerTarget?: HTMLElement;
+    triggerTarget!: HTMLElement;
     private get target() {
         return this.triggerTarget || this.parentElement
     }
+    constructor() {
+        super()
+        this.addDisposableListener(() => this.target, "mousemove", this._getMousePosition)
+        this.addDisposableListener(() => this.target, "mouseover", this.showToolTip)
+        this.addDisposableListener(() => this.target, "mouseleave", this._hideTooltip)
+    }
     connectedCallback(): void {
         super.connectedCallback()
-        if (this.target) {
-            this.target.addEventListener("mousemove", this._getMousePosition)
-            this.target.addEventListener("mouseover", this.showToolTip)
-            this.target.addEventListener("mouseleave", this._hideTooltip)
-        }
     }
     disconnectedCallback(): void {
-        super.connectedCallback()
-        this.target?.removeEventListener("mousemove", this._getMousePosition)
-        this.target?.removeEventListener("mouseover", this.showToolTip)
-        this.target?.removeEventListener("mouseleave", this._hideTooltip)
+        super.disconnectedCallback()
         this.portalElement.remove()
     }
     private _getMousePosition = (ev: MouseEvent) => {
@@ -153,39 +155,43 @@ export class TooltipElement extends LitElement implements TooltipProps {
         }
         const bounds = this.target.getBoundingClientRect()
         const portalBounds = this.portalElement.getBoundingClientRect()
-        if (this.target !== document.body)
+        if (this.target !== document.body) {
             if (this.maxWidth && this.maxWidth > 0) {
                 portalBounds.width = Math.min(portalBounds.width, this.maxWidth)
             }
+        }
+        let location: {
+            left: string;
+            top: string;
+        };
         if (this.position === "mouse" && this.mouseLocation) {
             this.mouseframe = undefined
-            const location = { left: this.mouseLocation.left + 10 + "px", top: this.mouseLocation.top - (portalBounds.height / 2) + "px" }
-            this.applyStyle({ ...styles, ...location })
+            location = { left: this.mouseLocation.left + 10 + "px", top: this.mouseLocation.top - (portalBounds.height / 2) + "px" }
         } else if (this.position === "top") {
-            const location = {
+            location = {
                 top: bounds.top - portalBounds.height + "px",
                 left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
             }
-            this.applyStyle({ ...styles, ...location })
         } else if (this.position === "bottom") {
-            const location = {
+            location = {
                 top: bounds.bottom + "px",
                 left: (bounds.left + (bounds.width / 2)) - (portalBounds.width / 2) + "px"
             }
-            this.applyStyle({ ...styles, ...location })
         } else if (this.position === "left") {
-            const location = {
+            location = {
                 top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
                 left: bounds.left - (portalBounds.width) + "px"
             }
-            this.applyStyle({ ...styles, ...location })
         } else if (this.position === "right") {
-            const location = {
+            location = {
                 top: Math.max(0, bounds.top + bounds.height / 2 - portalBounds.height / 2) + "px",
                 left: bounds.right + "px"
             }
-            this.applyStyle({ ...styles, ...location })
+        } else {
+            location = { left: "0px", top: "0px" };
+            console.error("Unknown position... Maybe we sould implement auto?")
         }
+        this.applyStyle({ ...styles, ...location })
         if (this.position !== "mouse") {
             this.portalElement.animate({ opacity: [0, 1] }, { duration: this.animationDuration })
         }
@@ -210,7 +216,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link TooltipElement}
              */
             [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>;
         }
@@ -219,7 +225,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link TooltipElement}
                  */
                 [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>
             }