Styling Tooltip

[sylcha]

Hi everyone!

Is there a way to apply a CSS style (with Tailwind syntax) to a tooltip : I wandered within the documentation but found no mention of it (which does not mean that there is not though...).

Thanks in advance for your answers,
Sylvain

[juujisai]

Hello. You would have to update the tooltips template option to make the changes in tooltip styling. The default template option looks like this (you can add one in a single string, doesn't have to be in 3 different like bellow)

  template:
    '<div class="opacity-0 transition-opacity duration-300 ease-in-out absolute z-[1080] block m-0 text-sm not-italic font-normal text-left no-underline underline-offset-auto normal-case leading-6 tracking-normal break-normal whitespace-normal" role="tooltip">' +
    '<div data-te-tooltip-inner-ref class="tooltip-inner max-w-[200px] text-sm py-1.5 px-4 text-white text-center bg-[#6d6d6d] rounded"></div>' +
    "</div>",

[juujisai]

This code works for me:

Hover the link to see the tooltip

When I change to the darkmode (added class dark to the html element) - the tooltip is changing color from blue to red. Does it work for you the same?

[sylcha]

If you mean by your question if the tooltip appears with the good color (blue in light mode and red in dark mode) in this page, well, it does not.
Maybe you forgot to write the code in your previous comment ?

[juujisai]

Oh wow, Im sorry. Seems like I pasted the wrong text

<p>
  Hover the link to see the
  <a
    href="#"
    class="transititext-primary text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
    data-te-toggle="tooltip"
    data-te-template='<div class="opacity-0 transition-opacity duration-300 ease-in-out absolute z-[1080] block m-0 text-sm not-italic font-normal text-left no-underline underline-offset-auto normal-case leading-6 tracking-normal break-normal whitespace-normal" role="tooltip">
      <div data-te-tooltip-inner-ref class="tooltip-inner max-w-[200px] text-sm py-1.5 px-4 text-white text-center bg-blue-600 rounded dark:bg-red-600"></div></div>'
    title="Hi! I'm tooltip"
    >tooltip</a
  >
</p>

This is the code for tooltip that I've shown on the screens yesterday

[sylcha]

Well, in my case, it still blue in dark mode and doesn't turn red.

Another weird thing happens. I use the very same Svelte component (code below) in two different places. In one place, style applies correctly (except for the dark mode colors). Here is what displayed in the inspector :

<span class="inline-block" data-te-toggle="tooltip" data-te-placement="bottom" data-te-template="<div class=&quot;opacity-0 transition-opacity duration-300 ease-in-out absolute z-[1080] block m-0 text-sm not-italic font-normal text-left no-underline underline-offset-auto normal-case leading-6 tracking-normal break-normal whitespace-normal&quot; role=&quot;tooltip&quot;><div data-te-tooltip-inner-ref class=&quot;tooltip-inner max-w-[200px] text-sm py-1.5 px-4 text-coopmaths-corpus-light dark:text-coopmathsdark-corpus-light text-center font-extralight bg-coopmaths-canvas-dark dark:bg-coopmathsdark-canvas-dark rounded-sm shadow-lg&quot;></div></div>" title="" data-te-original-title="Réduire la taille du texte" aria-label="Réduire la taille du texte"><button type="button" id="btn-269906712804013136424" class="flex items-center text-3xl text-coopmaths-action dark:text-coopmathsdark-action
        hover:text-coopmaths-action-lightest dark:hover:text-coopmathsdark-action-lightest"><i class="bx bx-zoom-out"></i></button></span>

On the other place, it has a different treatment and style does not apply at all :

<span class="inline-block" data-te-toggle="tooltip" data-te-placement="bottom" data-te-template="<div class=&quot;opacity-0 transition-opacity duration-300 ease-in-out absolute z-[1080] block m-0 text-sm not-italic font-normal text-left no-underline underline-offset-auto normal-case leading-6 tracking-normal break-normal whitespace-normal&quot; role=&quot;tooltip&quot;><div data-te-tooltip-inner-ref class=&quot;tooltip-inner max-w-[200px] text-sm py-1.5 px-4 text-coopmaths-corpus-light dark:text-coopmathsdark-corpus-light text-center font-extralight bg-coopmaths-canvas-dark dark:bg-coopmathsdark-canvas-dark rounded-sm shadow-lg&quot;></div></div>" title="Réduire la taille du texte"><button type="button" id="btn-3495029182152060655553" class="flex items-center text-3xl text-coopmaths-action dark:text-coopmathsdark-action
        hover:text-coopmaths-action-lightest dark:hover:text-coopmathsdark-action-lightest"><i class="bx bx-zoom-out"></i></button></span>

Have you noticed the difference ? In the first case (the one which works as expected), there is title="" data-te-original-title="Réduire la taille du texte" aria-label="Réduire la taille du texte" and on the other one (the one which behaves weirdly) just title="Réduire la taille du texte". I'm not sure whether that's why the second one does not have style applied though.

I don't know why this happens but this inconstancy drives me mad! Do you have any idea why it does not behave the same in the two places?

---

Here is the code of my button svelte component :

<script lang="ts">
  import { onMount } from 'svelte'
  import { getUniqueStringBasedOnTimeStamp } from '../utils/time'
  import { Tooltip, initTE } from 'tw-elements'
  import { tooltipTemplate } from '../../lib/format/tooltips'
  export let title: string = 'Valider'
  export let isDisabled: boolean = false
  export let icon: string = ''
  export let idLabel: string = getUniqueStringBasedOnTimeStamp('btn-')
  export let inverted: boolean = false
  export let tooltipTitle: string = 'Mon tooltip'
  export let tooltipPlacement: 'auto' | 'top' | 'bottom' | 'left' | 'right' =
    'top'

  onMount(() => {
    initTE({ Tooltip })
  })
</script>

<span
  class="inline-block"
  data-te-toggle="tooltip"
  data-te-placement={tooltipPlacement}
  data-te-template={tooltipTemplate}
  title={tooltipTitle}
>
  {#if title.length === 0}
    <button
      type="button"
      id={idLabel}
      class={`${
        $$props.class || ''
      } text-coopmaths-action dark:text-coopmathsdark-action
        ${
          isDisabled
            ? ' text-opacity-10 dark:text-opacity-10'
            : 'hover:text-coopmaths-action-lightest dark:hover:text-coopmathsdark-action-lightest'
        }`}
      disabled={isDisabled}
      on:click
    >
      <i class="bx {icon}" />
    </button>
  {:else}
    <button
      type="button"
      id={idLabel}
      class={`${$$props.class || ''}
    ${
      inverted
        ? 'text-coopmaths-action dark:text-coopmathsdark-action bg-coopmaths-canvas dark:bg-coopmathsdark-canvas border border-coopmaths-action hover:bg-coopmaths-action dark:hover:bg-coopmathsdark-action hover:text-coopmaths-canvas dark:hover:text-coopmathsdark-canvas'
        : 'text-coopmaths-canvas dark:text-coopmathsdark-canvas bg-coopmaths-action dark:bg-coopmathsdark-action hover:bg-coopmaths-action-lightest dark:hover:bg-coopmathsdark-action-lightest'
    }
      ${
        isDisabled
          ? 'dark:bg-coopmathsdark-action bg-opacity-10 dark:bg-opacity-10'
          : ''
      }`}
      disabled={isDisabled}
      on:click
    >
      {#if icon !== ''}
        <i class="bx {icon}" />
      {/if}
      {title}
    </button>
  {/if}
</span>

and I use it like this for exemple :

<ButtonWithTooltip
  tooltipTitle="Réduire la taille du texte"
  tooltipPlacement="bottom"
  title=""
  icon="bx-zoom-in"
  class="flex items-center text-3xl"
  on:click={zoomPlus}
/>

[juujisai]

Seems like the second one is not beeing initialized. You can try moving the initTE method to a parent component to both of those buttons or if thats not possible / wont work, try to initialize the component via JS (instead of initTE).

new Tooltip(document.querySelector("#tooltip-1"));

I do not see the reason why the darkmode classes doesn't work for you. Are you using tailwinds intelisense? Does it show styles of the tailwind classes after hover?