Aqua Basis

The implementation of the Tooltip is based on the **IPopover** interface, which allows extending the configuration of the core tooltip functionality through **POPOVER_CONFIG.** This enables developers to customize and enhance tooltip behavior while maintaining a consistent foundation.

Implementation

Web Component

<aq-button
	id="main-button-tooltip"
	aq-tooltip='{"content": "<span>This is a helper text or caption <em class=\\"aq-icon-email\\"></em></span>"}''
	is-outline
>
	Component Tooltip
</aq-button>
<br />
<br />
<br />
<aq-button is-ouline variant="primary" id="button-tooltip">
  Update tooltip content
</aq-button>
<script>
  const button = document.querySelector('#button-tooltip');
  button.addEventListener('click', () => {
    const mainButton = document.querySelector('#main-button-tooltip');
    mainButton.setAttribute('aq-tooltip', '{"content": "Updating content"}');
  });
</script>

Vue

<script lang="ts">
	import { AqButton } from '@aqua-ds/vue';
	import type { IPopover } from '@aqua-ds/web-components';
	import { defineComponent, ref } from 'vue';

	export default defineComponent({
	  components: {
	    AqButton,
	  },
	  setup() {
	    const tooltipConfigSimple = ref<IPopover>({
	      content: 'This is a tooltip',
	    })
	    const tooltipConfigWC = ref<IPopover>({
	      content: '<aq-heading level="1"><span slot="text">This is a heading</span></aq-heading>',
	    })
	    const tooltipConfigIcon = ref<IPopover>({
	      content: '<span>This is a helper text or caption <em class="aq-icon-email">Email</em></span>',
	    })
	    const updateTooltips = () => {
	      console.log('AQD Update Tooltips')
	
	      tooltipConfigSimple.value = { content: 'Update Tooltip' }
	      tooltipConfigWC.value = { content: 'Update Tooltip' }
	      tooltipConfigIcon.value = { content: 'Update Tooltip' }
	    }
	    return {
	      tooltipConfigSimple,
	      tooltipConfigWC,
	      tooltipConfigIcon,
	      updateTooltips,
	    }
	  },
	})
</script>

<template>
	<div>
	  <aq-button is-outline :aq-tooltip="JSON.stringify(tooltipConfigSimple)">
	    Set Simple Tooltip
	  </aq-button>
	  <aq-button is-outline :aq-tooltip="JSON.stringify(tooltipConfigWC)">
	    Set Tooltip With Web Component
	  </aq-button>
	  <aq-button is-outline :aq-tooltip="JSON.stringify(tooltipConfigIcon)">
	    Set Tooltip With HTML
	  </aq-button>
	
	  <br />
	  <br />
	  <br />
	  <aq-button variant="primary" @click="updateTooltips()"> Update Tooltip </aq-button>
	</div>
</template>

React

import { useState } from 'react';
import { AqButton } from '@aqua-ds/react';
import { IPopover } from '@aqua-ds/web-components';

export const TooltipDirectiveSet = () => {
  const [tooltipSimple, setTooltipSimple] = useState<IPopover>({
    content: 'This is a tooltip',
  });
  const [tooltipWC, setTooltipWC] = useState<IPopover>({
    content: '<aq-heading level="1"><span slot="text">This is a heading</span></aq-heading>',
  });
  const [tooltipIcons, setTooltipIcons] = useState<IPopover>({
    content:
      '<span>This is a helper text or caption <em class="aq-icon-email">Email</em></span>',
  });
  const updateTooltips = () => {
    setTooltipSimple({ content: 'Update Tooltip' });
    setTooltipWC({ content: 'Update Tooltip' });
    setTooltipIcons({ content: 'Update Tooltip' });
  };

  return (
    <>
      <div>
        <AqButton is-outline aq-tooltip={JSON.stringify(tooltipSimple)}>
          Set Simple Tooltip
        </AqButton>
        <AqButton is-outline aq-tooltip={JSON.stringify(tooltipWC)}>
          Set Tooltip With WC
        </AqButton>
        <AqButton is-outline aq-tooltip={JSON.stringify(tooltipIcons)}>
          Set Tooltip With Icon
        </AqButton>

        <br />
        <br />
        <br />
        <AqButton variant="primary" onClick={() => updateTooltips()}>
          Update Tooltip
        </AqButton>
      </div>
    </>
  );
};

Angular

//tooltip-directive-set.component.ts
import { Component, ElementRef, ViewChild } from '@angular/core';
import { AqButton } from '@aqua-ds/angular';
import { IPopover } from '@aqua-ds/web-components';

@Component({
  selector: 'app-set-tooltip-directive',
  imports: [AqButton],
  templateUrl: './set-tooltip-directive.component.html',
})

export class SetTooltipDirectiveComponent {
  @ViewChild('tooltipRefSimple', { static: true })
  tooltipRefSimple!: ElementRef<HTMLDivElement>;
  @ViewChild('tooltipRefWC', { static: true })
  tooltipRefWC!: ElementRef<HTMLDivElement>;
  @ViewChild('tooltipRefIcon', { static: true })
  tooltipRefIcon!: ElementRef<HTMLDivElement>;

  tooltipSimple: IPopover = {
    content: 'This is a tooltip',
  };
  tooltipWC: IPopover = {
    content: '<aq-heading level="1"><span slot="text">This is a heading</span></aq-heading>',
  };
  tooltipIcons: IPopover = {
    content:
      '<span>This is a helper text or caption <em class="aq-icon-email">Email</em></span>',
  };

  toJson(v: unknown) {
    return v == null ? null : JSON.stringify(v); // null/undefined → quita el atributo
  }

  updateTooltips() {
    this.tooltipSimple = { content: 'Update Tooltip' };
    this.tooltipWC = { content: 'Update Tooltip' };
    this.tooltipIcons = { content: 'Update Tooltip' };
  }
}

<!-- tooltip-directive-set.component.ts -->
<aq-button
  #tooltipRefSimple
  is-outline
  [attr.aq-tooltip]="toJson(tooltipSimple)"
>
  Set Simple Tooltip
</aq-button>
<aq-button #tooltipRefWC is-outline [attr.aq-tooltip]="toJson(tooltipWC)">
  Set Tooltip With WC
</aq-button>
<aq-button
  #tooltipRefIcon
  is-outline
  [attr.aq-tooltip]="toJson(tooltipIcons)"
>
  Set Tooltip With Icon
</aq-button>

<br />
<br />
<br />
<aq-button variant="primary" (click)="updateTooltips()">
  Update Tooltip
</aq-button>

On this page

✨ Design together. Build together. Speak the same language. ✨

back Aqua.png