Statut
-
Component checklist
Usage
<dsa-tooltip
id="tooltip"
content="This is a tooltip"
placement="top"
distance="8"
skidding="0"
trigger="hover focus"
hoist
>
<dsa-button description="This is a tooltip">Hover Me</dsa-button>
</dsa-tooltip>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/tooltip/tooltip.js'
import '@ds-autonomie/web-components/dist/components/button/button.js'
import type { DSATooltip, DSAButton } from @ds-autonomie/web-components'
const tooltipEl = document.querySelector<DSATooltip>('#tooltip')
if (tooltipEl !== null) {
console.log(tooltipEl.content)
}
</script>
Code HTML à implémenter pour utiliser le composant info bulle
import { Component } from '@angular/core';
import type { DSATooltip, DSAButton } from @ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/tooltip/tooltip.js'
import '@ds-autonomie/web-components/dist/components/button/button.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-tooltip
id="tooltip"
content="This is a tooltip"
placement="top"
distance="8"
skidding="0"
trigger="hover focus"
hoist
>
<dsa-button>Hover Me</dsa-button>
</dsa-tooltip>
app.component.html
API
Attributs et propriétés
|
attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
content |
Le contenu de l'info-bulle. Pour afficher du HTML utiliser la slot content |
string |
'' |
|
disabled |
Désactive l'info-bulle pour qu'elle ne s'affiche pas lorsqu'activée |
boolean |
false |
|
distance
|
La distance en pixel à partir de laquelle décaler l'info-bulle par rapport à sa cible. |
number |
8 |
|
hoist
|
Activez cette option pour empêcher que l'info-bulle ne soit tronquée lorsque le composant est placé dans un conteneur avec overflow:auto |hidden | scroll. Le hoist utilise une stratégie de positionnement fixe qui fonctionne dans de nombreux scénarios, mais pas dans tous |
boolean |
false |
|
open |
Indique si l'info-bulle est ouverte ou non. Vous pouvez l'utiliser à la place des méthodes show et hide |
boolean |
false |
|
placement |
L'emplacement préféré de l'info-bulle. Notez que l'emplacement réel peut varier selon les besoins pour conserver l'info-bulle à l'intérieur de la fenêtre |
top top-start top-end right right-start right-end bottom bottom-start bottom-end left left-start left-end |
top |
|
skidding |
Distance en pixels à partir de laquelle décaler l'info-bulle le long de sa cible |
number |
0 |
|
trigger |
Contrôle la manière dont l'info-bulle est activée. Les options possibles incluent click, hover, focus, et manual. Plusieurs options peuvent être transmises en les séparant par un espace. Lorsque le manuel est utilisé, l'info-bulle doit être activée par programmation |
string |
'hover focus' |
Méthodes
|
Nom |
Description |
Type |
|---|---|---|
|
hide() |
Cache l'info-bulle |
() => Promise<void> |
|
show() |
Affiche l'info-bulle |
() => Promise<void> |
Slots
|
Nom |
Description |
|---|---|
|
(défaut) |
L'élément cible de l'info-bulle (dsa-button ou dsa-icon-button). Évitez d'insérer plus d'un élément, car les suivants seront ignorés |
|
content |
Le contenu à afficher dans l'info-bulle. Alternativement, vous pouvez utiliser la propriété content |
Événements
|
Nom |
Description |
|---|---|
|
dsa-after-hide |
Émis lorsque lorsque l'info-bulle est cachée et que toutes les animations sont complétées |
|
dsa-after-show |
Émis lorsque l'info-bulle est affichée et que toutes les animations sont complétées |
|
dsa-hide |
Émis lorsque l'info-bulle commence à disparaître |
|
dsa-show |
Émis lorsque l'info-bulle commence à s'afficher |