Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

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">
	export default defineComponent({
	  components: {
	    AqButton,
	  },
	  setup() {
	    const tooltipConfigSimple = ref<IPopover>({
	      content: 'This is a tooltip',
	    })
	    const tooltipConfigWC = ref<IPopover>({
	      content: '<aq-heading level="1">This is a heading</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>
	  <!-- Native click event -->
	  <!-- <button class="button is-small" @click="handleLeftClick()">Set spinner</button> -->
	  <!-- Custom event -->
	  <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

export const TooltipDirectiveSet = () => {
  const [tooltipSimple, setTooltipSimple] = useState<IPopover>({
    content: 'This is a tooltip',
  });
  const [tooltipWC, setTooltipWC] = useState<IPopover>({
    content: '<aq-heading level="1">This is a heading</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 (
    <>
      <AqButton is-outline aq-tooltip={JSON.stringify(tooltipSimple)}>
        Set Simple Tooltip
      </AqButton>
      <AqButton is-outline aq-tooltip={JSON.stringify(tooltipWC)}>
        Set Tooltip With Web Component
      </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>
    </>
  );
};

Angular

//tooltip-directive-set.component.ts
@Component({
  selector: 'app-tooltip-directive-set',
  imports: [AqButton],
  templateUrl: './tooltip-directive-set.component.html',
})
export class TooltipDirectiveComponentSet {
  @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">This is a heading</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. ✨