Tooltip: Improve typings && Refactor (#33917)

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

Author: marker-dao

packages/devextreme/js/__internal/scheduler/appointments/appointment/m_appointment.ts

@@ -249,7 +249,7 @@ export class Appointment extends DOMComponent<AppointmentProperties> {
     eventsEngine.off($icon, REDUCED_APPOINTMENT_POINTERENTER_EVENT_NAME);
     eventsEngine.on($icon, REDUCED_APPOINTMENT_POINTERENTER_EVENT_NAME, () => {
       show({
-        target: $icon,
+        target: $icon.get(0),
         content: getReducedIconTooltip(this.option()),
       });
     });

packages/devextreme/js/__internal/ui/m_tooltip.ts

@@ -8,10 +8,11 @@ import type { PopoverProperties } from './popover/m_popover';
 
 // STYLE tooltip
 
+export interface TooltipProperties extends PopoverProperties {}
+
 const TOOLTIP_CLASS = 'dx-tooltip';
 const TOOLTIP_WRAPPER_CLASS = 'dx-tooltip-wrapper';
 
-export interface TooltipProperties extends PopoverProperties {}
 class Tooltip<
   TProperties extends TooltipProperties = TooltipProperties,
 > extends Popover<TProperties> {
@@ -57,7 +58,8 @@ class Tooltip<
 
   _toggleAriaAttributes(): void {
     this._contentId = `dx-${new Guid()}`;
-    // @ts-expect-error ts-error
+
+    // @ts-expect-error dxElementWrapper typings
     this.$overlayContent().attr({
       id: this._contentId,
     });

packages/devextreme/js/__internal/ui/popover/m_popover.ts

@@ -71,7 +71,7 @@ export interface PopoverProperties extends Omit<Properties,
 
   useFlatToolbarButtons?: boolean;
 
-  arrowOffset: number;
+  arrowOffset?: number;
 
   arrowPosition?: string;
 
@@ -497,7 +497,7 @@ class Popover<
 
     const borderWidth = this._positionController._getContentBorderWidth(side);
 
-    const { arrowOffset } = this.option();
+    const { arrowOffset = 0 } = this.option();
 
     const finalArrowLocation = fitIntoRange(
       arrowLocation - borderWidth + arrowOffset,

packages/devextreme/js/__internal/ui/tooltip/m_tooltip.ts

@@ -1,52 +1,72 @@
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { Deferred } from '@js/core/utils/deferred';
-import { extend } from '@js/core/utils/extend';
 import { value as viewPort } from '@js/core/utils/view_port';
+import type { Properties } from '@js/ui/tooltip';
 import Tooltip from '@js/ui/tooltip';
 
-let tooltip = null;
-let removeTooltipElement = null;
+type CreateTooltipConfig = Properties & {
+  content?: string;
+};
+
+let tooltip: Tooltip | null = null;
+let clean: (() => void) | null = null;
 
-const createTooltip = function (options) {
-  options = extend({ position: 'top' }, options);
+const createTooltip = (configuration: CreateTooltipConfig): void => {
+  const options = {
+    position: 'top',
+    ...configuration,
+  };
 
   const { content } = options;
+
   delete options.content;
 
-  const $tooltip = $('<div>')
+  let $tooltip: dxElementWrapper | null = $('<div>')
     .html(content)
     .appendTo(viewPort());
 
-  // @ts-expect-error
-  removeTooltipElement = function () {
-    $tooltip.remove();
+  tooltip = new Tooltip($tooltip?.get(0), options as Properties);
+
+  clean = (): void => {
+    $tooltip?.remove();
+    $tooltip = null;
+    tooltip = null;
   };
-  // @ts-expect-error
-  tooltip = new Tooltip($tooltip, options);
 };
 
-const removeTooltip = function () {
+const removeTooltip = (): void => {
   if (!tooltip) {
     return;
   }
-  // @ts-expect-error
-  removeTooltipElement();
-  tooltip = null;
+
+  clean?.();
 };
 
-export function show(options) {
+export function show(options: CreateTooltipConfig): Promise<boolean> {
   removeTooltip();
   createTooltip(options);
-  // @ts-expect-error
+
+  if (!tooltip) {
+    return Deferred<boolean>()
+      .resolve(false)
+      .promise();
+  }
+
   return tooltip.show();
 }
 
-export function hide() {
+export function hide(): Promise<boolean> {
   if (!tooltip) {
-    return Deferred().resolve();
+    return Deferred<boolean>()
+      .resolve(false)
+      .promise();
   }
-  // @ts-expect-error
-  return tooltip.hide()
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return tooltip
+    .hide()
+    // @ts-expect-error Deferred.promise() typings
     .done(removeTooltip)
     .promise();
 }