Hopp til hovedinnhold

I dagens CSS skal vi se på anchor-name

Visste du at det nå er mulig å lage tooltips native med bare CSS? Med anchor-name kan man definere såkalte ankere som man kan forankre andre elementer til.

I eksempelet over har vi altså laget oss et anker med anchor-name: --myAnchor; for så å forankre tooltipen med position-anchor: --myAnchor; . Vi kan så definere hvor tooltipen er i forhold til ankeret ved å bruke anchor(top|right|bottom|left) på en av top, right, bottom eller left egenskapene. Her er altså tooltipens venstre side mot ankerets høyre side, og tooltipens øvre side mot ankerts bunn.

Denne funksjonen er dessverre fortsatt i litt tidlig stadie, så foreløpig mangler det støtte for den i Safari og Firefox.

Relevante lenker anbefalt av forfatteren

Liker du innlegget?

Del gjerne med kollegaer og venner