zadanie.md

Rozcestník

• Späť na úvod
• Repo: Štartér, Riešenie
• Zobraziť riešenie

Popisok (tooltip)

Hlavný jazyk príkladu: CSS

Ostatné použité jazyky: HTML

Obťažnosť: 1/5

Obsah príkladu: Základné CSS selektory, umiestňovanie elementov pomocou CSS, CSS vlastnosti position a display, CSS vrstvy, rámčeky, pseudotrieda :hover.

Zadanie

Pomocou CSS štýlov (bez použitia JavaScriptu) vytvorte možnosť pridávania popiskov (tooltips) do textu. Pokiaľ používateľ umiestni nad definovaný úsek textu kurzor myši, popisok sa objaví, ak kurzor myši text opustí, popisok zmizne.

Vstupný HTML súbor by mal vyzerať takto:

<div>
    Lorem ipsum dolor sit amet,
    <span>consectetur</span>
    <span class="tooltip">Tooltip: In mollis accumsan sodales.</span>
    adipiscing elit. In
    <span>hendrerit</span>
    <span class="tooltip">Tooltip: Maecenas lobortis quam quis euismod maximus.</span>
    adipiscing elit. ac ex eu aliquam. Etiam lacus orci, egestas et tempor at,
    <span>rutrum</span>
    <span class="tooltip">Tooltip: Curabitur consequat ligula vel tortor consequat, quis mattis mi egestas.</span>
    adipiscing elit. vitae nulla.
</div>

V prípade potreby si môžete štruktúru dokumentu upraviť tak, aby sa vám lepšie pracovalo. Pri riešení úlohy použite výhradne CSS.