feat: add tip slot to customize tip content (#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]>
containers · 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">