- BsTooltip: improve show/hide.

- Improve field label css

Author: ahmadfajar

src/components/Basic/basic.scss

@@ -38,7 +38,7 @@
     height: 48px;
 
     &.subheader--dark {
-        --#{vars.$prefix}subheader-color: #{rgba(colors.$white, .8)};
+        --#{vars.$prefix}subheader-color: #{rgba(colors.$white, .68)};
     }
 
     &.subheader--light {

src/components/Field/field.scss

@@ -65,10 +65,12 @@
         }
     }
 
+    > .col-form-label, .#{vars.$prefix}field-label {
+        color: var(--#{vars.$prefix}field-label-color);
+    }
+
     &.required {
-        > .col-form-label,
-        .#{vars.$prefix}field-label {
-            color: var(--#{vars.$prefix}field-label-color);
+        > .col-form-label, .#{vars.$prefix}field-label {
             font-weight: vars.$font-weight-semi-bold;
         }
     }

src/components/Tooltip/mixins/tooltipApi.ts

@@ -213,20 +213,22 @@ export function useAddTooltipListener(
         window.requestAnimationFrame(() => {
             useSetTooltipPosition(activatorRef, tooltipRef, tooltipArrowRef, placementRef);
             instance.emit('update:show', true);
-            active.value = true;
+            Helper.defer(() => {
+                active.value = true;
+            }, 60);
         });
-        // preventEventTarget(e);
     };
     const hideTooltip = () => {
+        Helper.defer(() => {
+            active.value = false;
+        }, 60);
         instance.emit('update:show', false);
-        active.value = false;
     };
 
     const activatorEl = findActivatorElement(instance, trigger) as IHTMLElement | null;
     activatorRef.value = activatorEl;
 
     if (activatorEl) {
-        // const options = { capture: true, passive: false };
         (activatorEl as IBindingElement).__mouseEvents = {
             mouseEnter: EventListener.listen(activatorEl, 'mouseenter', showTooltip),
             mouseLeave: EventListener.listen(activatorEl, 'mouseleave', hideTooltip),

src/mixins/types/DomHelper.d.ts

@@ -5,12 +5,17 @@ export declare class EventListener {
      * Listen to DOM events during the bubble phase.
      *
      * @param context   DOM element to register listener on.
-     * @param eventType Event type, e.g. 'click' or 'mouseover'.
+     * @param eventName Event type, e.g. 'click' or 'mouseover'.
      * @param callback  Callback function.
      * @param options   Listener options.
      * @returns Object with a `remove` method.
      */
-    static listen(context: IHTMLElement, eventType: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): IEventResult | undefined;
+    static listen(
+        context: IHTMLElement,
+        eventName: string,
+        callback: EventListenerOrEventListenerObject,
+        options?: boolean | AddEventListenerOptions
+    ): IEventResult | undefined;
 }
 
 export declare function useAddResizeListener(el: IBindingElement, fn: CallableFunction): void;
@@ -28,4 +33,7 @@ export declare function isSVGElement(source?: HTMLElement | null): boolean;
  * @param target The child element to check.
  * @returns TRUE if `target` is indirect child otherwise `false`.
  */
-export declare function isChildOf(parent: HTMLElement | Node | null, target?: HTMLElement | null): boolean;
+export declare function isChildOf(
+    parent: HTMLElement | Node | null,
+    target?: HTMLElement | null
+): boolean;