feat: add tip slot to customize tip content (podman-desktop#7150)

* feat: allow to add custom classes to tip Signed-off-by: lstocchi <[email protected]> * fix: add tip slot into tooltip Signed-off-by: lstocchi <[email protected]> * fix: add check for tip content Signed-off-by: lstocchi <[email protected]> * fix: rename slot as per review Signed-off-by: lstocchi <[email protected]> --------- Signed-off-by: lstocchi <[email protected]>
axel7083 · May 13, 2024 · 17d4db0 · 17d4db0
1 parent ec47bf8
commit 17d4db0
Show file tree

Hide file tree

Showing 23 changed files with 422 additions and 174 deletions.
diff --git a/packages/renderer/src/lib/deployments/DeploymentColumnConditions.svelte b/packages/renderer/src/lib/deployments/DeploymentColumnConditions.svelte
@@ -26,11 +26,20 @@ function getConditionColour(type: string): string {
 
 <div class="flex flex-row gap-1">
   {#each object.conditions as condition}
-    <Tooltip tip="{condition.message}" bottom>
-      <div class="flex flex-row bg-charcoal-500 items-center p-1 rounded-md text-xs text-gray-500">
-        <div class="w-2 h-2 {getConditionColour(condition.type)} rounded-full mr-1"></div>
-        {condition.type}
-      </div>
+    <Tooltip bottom>
+      <svelte:fragment slot="content">
+        <div class="flex flex-row bg-charcoal-500 items-center p-1 rounded-md text-xs text-gray-500">
+          <div class="w-2 h-2 {getConditionColour(condition.type)} rounded-full mr-1"></div>
+          {condition.type}
+        </div>
+      </svelte:fragment>
+      <svelte:fragment slot="tip">
+        {#if condition.message}
+          <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white" aria-label="tooltip">
+            {condition.message}
+          </div>
+        {/if}
+      </svelte:fragment>
     </Tooltip>
   {/each}
 </div>
diff --git a/packages/renderer/src/lib/donut/Donut.svelte b/packages/renderer/src/lib/donut/Donut.svelte
@@ -26,23 +26,32 @@ $: stroke = percent < 0 ? '' : percent < 50 ? 'stroke-green-500' : percent < 75
 $: tooltip = percent ? percent.toFixed(0) + '% ' + title + ' usage' : '';
 </script>
 
-<Tooltip tip="{tooltip}" bottom>
-  <svg viewBox="-4 -4 {size + 8} {size + 8}" height="{size}" width="{size}">
-    <circle fill="none" class="stroke-charcoal-300" stroke-width="1" r="{size / 2}" cx="{size / 2}" cy="{size / 2}"
-    ></circle>
-    <path
-      fill="none"
-      class="{stroke}"
-      stroke-width="3.5"
-      d="{describeArc(size / 2, (percent * 360) / 100)}"
-      data-testid="arc"></path>
-    <text x="{size / 2}" y="38%" text-anchor="middle" font-size="{size / 5.5}" class="fill-gray-800">{title}</text>
-    <text
-      x="{size / 2}"
-      y="52%"
-      text-anchor="middle"
-      font-size="{size / 4.5}"
-      dominant-baseline="central"
-      class="fill-gray-400">{value !== undefined ? value : ''}</text>
-  </svg>
+<Tooltip bottom>
+  <svelte:fragment slot="content">
+    <svg viewBox="-4 -4 {size + 8} {size + 8}" height="{size}" width="{size}">
+      <circle fill="none" class="stroke-charcoal-300" stroke-width="1" r="{size / 2}" cx="{size / 2}" cy="{size / 2}"
+      ></circle>
+      <path
+        fill="none"
+        class="{stroke}"
+        stroke-width="3.5"
+        d="{describeArc(size / 2, (percent * 360) / 100)}"
+        data-testid="arc"></path>
+      <text x="{size / 2}" y="38%" text-anchor="middle" font-size="{size / 5.5}" class="fill-gray-800">{title}</text>
+      <text
+        x="{size / 2}"
+        y="52%"
+        text-anchor="middle"
+        font-size="{size / 4.5}"
+        dominant-baseline="central"
+        class="fill-gray-400">{value !== undefined ? value : ''}</text>
+    </svg>
+  </svelte:fragment>
+  <svelte:fragment slot="tip">
+    {#if tooltip}
+      <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white" aria-label="tooltip">
+        {tooltip}
+      </div>
+    {/if}
+  </svelte:fragment>
 </Tooltip>
diff --git a/packages/renderer/src/lib/extensions/ExtensionBadge.svelte b/packages/renderer/src/lib/extensions/ExtensionBadge.svelte
@@ -8,12 +8,26 @@ export let extension: { type: 'dd' | 'pd'; removable: boolean };
 
 <div class="flex flex-row gap-1 items-center {$$props.class}" role="region" aria-label="Extension Badge">
   {#if extension.type === 'dd'}
-    <Tooltip tip="Docker Desktop extension" right>
-      <Badge class="text-[8px] text-white" color="bg-sky-600" label="Docker Desktop extension" />
+    <Tooltip right>
+      <svelte:fragment slot="content">
+        <Badge class="text-[8px] text-white" color="bg-sky-600" label="Docker Desktop extension" />
+      </svelte:fragment>
+      <svelte:fragment slot="tip">
+        <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white" aria-label="tooltip">
+          Docker Desktop extension
+        </div>
+      </svelte:fragment>
     </Tooltip>
   {:else if !extension.removable}
-    <Tooltip tip="built-in Extension" right>
-      <Badge class="text-[8px] text-charcoal-800" color="bg-sky-200" label="built-in Extension" />
+    <Tooltip right>
+      <svelte:fragment slot="content">
+        <Badge class="text-[8px] text-charcoal-800" color="bg-sky-200" label="built-in Extension" />
+      </svelte:fragment>
+      <svelte:fragment slot="tip">
+        <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white" aria-label="tooltip">
+          built-in Extension
+        </div>
+      </svelte:fragment>
     </Tooltip>
   {/if}
 </div>
diff --git a/packages/renderer/src/lib/extensions/ExtensionDetailsLink.svelte b/packages/renderer/src/lib/extensions/ExtensionDetailsLink.svelte
@@ -15,15 +15,22 @@ function openDetailsExtension() {
 }
 </script>
 
-<Tooltip tip="{extension.name} extension details" top>
-  <button aria-label="{extension.name} extension details" type="button" on:click="{() => openDetailsExtension()}">
-    <div class="flex flex-row items-center">
-      {#if displayIcon}
-        <Fa icon="{faArrowUpRightFromSquare}" />
-      {/if}
-      <div class="text-left before:{$$props.class}">
-        {extension.displayName} extension
+<Tooltip top>
+  <svelte:fragment slot="content">
+    <button aria-label="{extension.name} extension details" type="button" on:click="{() => openDetailsExtension()}">
+      <div class="flex flex-row items-center">
+        {#if displayIcon}
+          <Fa icon="{faArrowUpRightFromSquare}" />
+        {/if}
+        <div class="text-left before:{$$props.class}">
+          {extension.displayName} extension
+        </div>
       </div>
+    </button>
+  </svelte:fragment>
+  <svelte:fragment slot="tip">
+    <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white" aria-label="tooltip">
+      {extension.name} extension details
     </div>
-  </button>
+  </svelte:fragment>
 </Tooltip>
diff --git a/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte b/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
@@ -90,8 +90,15 @@ onMount(() => {
     </div>
     <div class="ml-2 text-sm text-left break-normal w-36">{title}</div>
     {#if isDefault}
-      <Tooltip tip="Default platform of your computer">
-        <Fa size="0.5x" class="text-dustypurple-700 cursor-pointer" icon="{faCircle}" />
+      <Tooltip>
+        <svelte:fragment slot="content">
+          <Fa size="0.5x" class="text-dustypurple-700 cursor-pointer" icon="{faCircle}" />
+        </svelte:fragment>
+        <svelte:fragment slot="tip">
+          <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white" aria-label="tooltip">
+            Default platform of your computer
+          </div>
+        </svelte:fragment>
       </Tooltip>
     {/if}
   </div>

diff --git a/packages/renderer/src/lib/kube/KubeEditYAML.svelte b/packages/renderer/src/lib/kube/KubeEditYAML.svelte
@@ -79,21 +79,35 @@ async function applyToCluster() {
   class="flex flex-row-reverse p-6 bg-transparent fixed bottom-0 right-0 mb-5 pr-10 max-h-20 bg-opacity-90 z-50"
   role="group"
   aria-label="Edit Buttons">
-  <Tooltip tip="Apply the changes to the cluster, similar to 'kubectl apply'" topLeft="{true}">
-    <Button
-      type="primary"
-      aria-label="Apply changes to cluster"
-      on:click="{applyToCluster}"
-      disabled="{!changesDetected}"
-      inProgress="{inProgress}">Apply changes to cluster</Button>
+  <Tooltip topLeft>
+    <svelte:fragment slot="content">
+      <Button
+        type="primary"
+        aria-label="Apply changes to cluster"
+        on:click="{applyToCluster}"
+        disabled="{!changesDetected}"
+        inProgress="{inProgress}">Apply changes to cluster</Button>
+    </svelte:fragment>
+    <svelte:fragment slot="tip">
+      <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white" aria-label="tooltip">
+        Apply the changes to the cluster, similar to 'kubectl apply'
+      </div>
+    </svelte:fragment>
   </Tooltip>
-  <Tooltip tip="Revert the changes to the original content" topLeft="{true}">
-    <Button
-      type="secondary"
-      aria-label="Revert changes"
-      class="mr-2 opacity-100"
-      on:click="{revertChanges}"
-      disabled="{!changesDetected}">Revert changes</Button>
+  <Tooltip topLeft>
+    <svelte:fragment slot="content">
+      <Button
+        type="secondary"
+        aria-label="Revert changes"
+        class="mr-2 opacity-100"
+        on:click="{revertChanges}"
+        disabled="{!changesDetected}">Revert changes</Button>
+    </svelte:fragment>
+    <svelte:fragment slot="tip">
+      <div class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white" aria-label="tooltip">
+        Revert the changes to the original content
+      </div>
+    </svelte:fragment>
   </Tooltip>
 </div>
 

diff --git a/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte
@@ -99,13 +99,22 @@ import SettingsPage from './SettingsPage.svelte';
                           aria-label="Logged In Username">
                           {account.label}
                         </span>
-                        <Tooltip tip="Sign out of {account.label}" bottomRight>
-                          <button
-                            aria-label="Sign out of {account.label}"
-                            class="pl-2 hover:cursor-pointer hover:text-white text-white"
-                            on:click="{() => window.requestAuthenticationProviderSignOut(provider.id, account.id)}">
-                            <Fa class="h-3 w-3 text-md mr-2" icon="{faRightFromBracket}" />
-                          </button>
+                        <Tooltip bottomRight>
+                          <svelte:fragment slot="content">
+                            <button
+                              aria-label="Sign out of {account.label}"
+                              class="pl-2 hover:cursor-pointer hover:text-white text-white"
+                              on:click="{() => window.requestAuthenticationProviderSignOut(provider.id, account.id)}">
+                              <Fa class="h-3 w-3 text-md mr-2" icon="{faRightFromBracket}" />
+                            </button>
+                          </svelte:fragment>
+                          <svelte:fragment slot="tip">
+                            <div
+                              class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white"
+                              aria-label="tooltip">
+                              Sign out of {account.label}
+                            </div>
+                          </svelte:fragment>
                         </Tooltip>
                       </div>
                     </div>
@@ -119,15 +128,24 @@ import SettingsPage from './SettingsPage.svelte';
             {#if sessionRequests.length === 1}
               {@const request = sessionRequests[0]}
               <!-- Authentication Provider Auth Request Sign In button start -->
-              <Tooltip tip="Sign in to use {request.extensionLabel}" bottomLeft>
-                <Button
-                  aria-label="Sign in"
-                  class="pl-2 mr-4 hover:cursor-pointer hover:text-white text-white"
-                  on:click="{() => window.requestAuthenticationProviderSignIn(request.id)}">
-                  <div class="flex flex-row items-center">
-                    <Fa class="h-3 w-3 text-md mr-2" icon="{faRightToBracket}" />Sign in
+              <Tooltip bottomLeft>
+                <svelte:fragment slot="content">
+                  <Button
+                    aria-label="Sign in"
+                    class="pl-2 mr-4 hover:cursor-pointer hover:text-white text-white"
+                    on:click="{() => window.requestAuthenticationProviderSignIn(request.id)}">
+                    <div class="flex flex-row items-center">
+                      <Fa class="h-3 w-3 text-md mr-2" icon="{faRightToBracket}" />Sign in
+                    </div>
+                  </Button>
+                </svelte:fragment>
+                <svelte:fragment slot="tip">
+                  <div
+                    class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white"
+                    aria-label="tooltip">
+                    Sign in to use {request.extensionLabel}
                   </div>
-                </Button>
+                </svelte:fragment>
               </Tooltip>
               <!-- Authentication Provider Auth Request Sign In button end -->
             {:else if sessionRequests.length > 1}

diff --git a/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
@@ -416,13 +416,22 @@ function hasAnyConfiguration(provider: ProviderInfo) {
                           ? provider.kubernetesProviderConnectionCreationButtonTitle
                           : undefined) || 'Create new'}
                     <!-- create new provider button -->
-                    <Tooltip tip="Create new {providerDisplayName}" bottom>
-                      <Button
-                        aria-label="Create new {providerDisplayName}"
-                        inProgress="{providerInstallationInProgress.get(provider.name)}"
-                        on:click="{() => doCreateNew(provider, providerDisplayName)}">
-                        {buttonTitle} ...
-                      </Button>
+                    <Tooltip bottom>
+                      <svelte:fragment slot="content">
+                        <Button
+                          aria-label="Create new {providerDisplayName}"
+                          inProgress="{providerInstallationInProgress.get(provider.name)}"
+                          on:click="{() => doCreateNew(provider, providerDisplayName)}">
+                          {buttonTitle} ...
+                        </Button>
+                      </svelte:fragment>
+                      <svelte:fragment slot="tip">
+                        <div
+                          class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white"
+                          aria-label="tooltip">
+                          Create new {providerDisplayName}
+                        </div>
+                      </svelte:fragment>
                     </Tooltip>
                   {/if}
                   {#if isOnboardingEnabled(provider, globalContext) || hasAnyConfiguration(provider)}
@@ -456,18 +465,29 @@ function hasAnyConfiguration(provider: ProviderInfo) {
             {@const peerProperties = new PeerProperties()}
             <div class="px-5 py-2 w-[240px]" role="region" aria-label="{container.name}">
               <div class="float-right">
-                <Tooltip tip="{provider.name} details" bottom>
-                  <button
-                    aria-label="{provider.name} details"
-                    type="button"
-                    on:click="{() =>
-                      router.goto(
-                        `/preferences/container-connection/view/${provider.internalId}/${Buffer.from(
-                          container.name,
-                        ).toString('base64')}/${Buffer.from(container.endpoint.socketPath).toString('base64')}/summary`,
-                      )}">
-                    <Fa icon="{faArrowUpRightFromSquare}" />
-                  </button>
+                <Tooltip bottom>
+                  <svelte:fragment slot="content">
+                    <button
+                      aria-label="{provider.name} details"
+                      type="button"
+                      on:click="{() =>
+                        router.goto(
+                          `/preferences/container-connection/view/${provider.internalId}/${Buffer.from(
+                            container.name,
+                          ).toString(
+                            'base64',
+                          )}/${Buffer.from(container.endpoint.socketPath).toString('base64')}/summary`,
+                        )}">
+                      <Fa icon="{faArrowUpRightFromSquare}" />
+                    </button>
+                  </svelte:fragment>
+                  <svelte:fragment slot="tip">
+                    <div
+                      class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white"
+                      aria-label="tooltip">
+                      {provider.name} details
+                    </div>
+                  </svelte:fragment>
                 </Tooltip>
               </div>
               <div class="{container.status !== 'started' ? 'text-gray-900' : ''} text-sm">
@@ -539,18 +559,27 @@ function hasAnyConfiguration(provider: ProviderInfo) {
           {#each provider.kubernetesConnections as kubeConnection}
             <div class="px-5 py-2 w-[240px]" role="region" aria-label="{kubeConnection.name}">
               <div class="float-right">
-                <Tooltip tip="{provider.name} details" bottom>
-                  <button
-                    aria-label="{provider.name} details"
-                    type="button"
-                    on:click="{() =>
-                      router.goto(
-                        `/preferences/kubernetes-connection/${provider.internalId}/${Buffer.from(
-                          kubeConnection.endpoint.apiURL,
-                        ).toString('base64')}/summary`,
-                      )}">
-                    <Fa icon="{faArrowUpRightFromSquare}" />
-                  </button>
+                <Tooltip bottom>
+                  <svelte:fragment slot="content">
+                    <button
+                      aria-label="{provider.name} details"
+                      type="button"
+                      on:click="{() =>
+                        router.goto(
+                          `/preferences/kubernetes-connection/${provider.internalId}/${Buffer.from(
+                            kubeConnection.endpoint.apiURL,
+                          ).toString('base64')}/summary`,
+                        )}">
+                      <Fa icon="{faArrowUpRightFromSquare}" />
+                    </button>
+                  </svelte:fragment>
+                  <svelte:fragment slot="tip">
+                    <div
+                      class="inline-block py-2 px-4 rounded-md bg-charcoal-800 text-xs text-white"
+                      aria-label="tooltip">
+                      {provider.name} details
+                    </div>
+                  </svelte:fragment>
                 </Tooltip>
               </div>
               <div class="text-sm">