# Egyéni attribútumok és tippek

> Saját HTML-attribútumok hozzáadása bármelyik elemhez, dinamikus értékekkel, valamint CSS-alapú tippek (tooltip) készítése.

Bármelyik elemhez hozzáadhatsz saját HTML-attribútumokat. Ezzel például ARIA-szerepkört, adatattribútumot vagy tippet (tooltip) állíthatsz be kód írása nélkül.

## Attribútum hozzáadása

1. Jelölj ki egy elemet a szerkesztőben.
2. Nyisd meg a **Stílus** lapot, és keresd meg az **Attribútumok** csoportot.
3. A plusz ikonnal vegyél fel egy új sort.
4. Add meg az attribútum **Nevét** és **Értékét**.

Egyszerre több attribútumot is felvehetsz. Az attribútumok alapból az elem gyökércsomópontjára kerülnek, a legfontosabb csomópontra. Az értékeket kézzel is megadhatod, de dinamikus adatból is feltöltheted őket: a dinamikus adat a frontenden kiértékelődik.

### Példa: egy képcsoport egyetlen képként

Ha egy tárolóban több kép van, amelyet egyetlen képnek szeretnél jelölni a segítő technológiák számára, vedd fel ezt a két attribútumot:

| Név | Érték |
| --- | --- |
| `role` | `img` |
| `aria-label` | A teljes kép leírása |

A tároló HTML-je ezután így néz ki:

```html
<div id="brxe-sfglik" class="brxe-sfglik brxe-container" role="img" aria-label="A teljes kép leírása">
  ... a tároló elemei ...
</div>
```

Az egyéni attribútumok elsőbbséget élveznek az alapértelmezettekkel szemben. Ha egy kép elemnél megadsz egy `alt` attribútumot, az felülírja az alapértelmezett `alt` szöveget.

## Melyik HTML-címkére kerül az attribútum

Néhány elemnél az attribútum nem a gyökércsomópontra, hanem egy meghatározott címkére kerül:

| Bricks elem | HTML-címke |
| --- | --- |
| Navigációs menü | `<nav>` |
| Címsor | `<h1>` vagy bármelyik másik címsorcímke |
| Szöveg | `<div>` |
| Gomb | `<button>`, vagy `<a>`, ha van hivatkozás |
| Kép | `<img>` |
| Videó | `<div>` |
| Űrlap | `<form>` |

## Tippek (tooltip) egyéni attribútumokkal

A Bricks beépített, csak CSS-t használó tippeket tartalmaz, amelyeket egyéni attribútumokkal állíthatsz be.

1. Vegyél fel egy attribútumot `data-balloon` névvel. Az értéke a tipp szövege.
2. Vegyél fel egy második attribútumot `data-balloon-pos` névvel. Az értéke a tipp elhelyezkedése.

Az elhelyezkedés lehetséges értékei:

- `top`, `top-right`, `top-left`
- `right`
- `bottom`, `bottom-right`, `bottom-left`
- `left`

A tippeket a Balloon.css könyvtár adja, a további lehetőségeket az ő attribútumai határozzák meg.
