naslov elementa

Prikaz naslova elementa

Prikaz naslova elementa (ang. Tooltip) je majhna, pogosto tekstualna informacija, ki se prikaže, ko uporabnik premakne kazalec miške nad določen element na spletni strani ali aplikaciji. Tooltip-i so uporabni za zagotavljanje dodatnih informacij ali pojasnil brez zasedanja dodatnega prostora na strani.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>naslov elementa</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

.container {
            display: flex;
            justify-content: center;
            max-width: 100%;
            height: auto;
            padding: 30px;
            background: linear-gradient(85deg, lightblue, lightcyan, whitesmoke, white, whitesmoke, lightcyan, lightblue);
            border: 1px solid deepskyblue;
            border-radius: 24px;
            box-shadow: 0 48px 100px 0 rgba(17, 12, 46, 0.15);
        }

.naslov {
            position: relative;
            display: inline-block;
            color: red;
            font-weight: bold;
            font-size: 30px;
            font-family: "Bookman Old Style", sans-serif;
        }

.naslov .naslovBesedila {
            transition: opacity 0.3s;
            position: absolute;
            width: 20em;
            padding: 10px;
            background-color: lightblue;
            color: black;
            text-align: center;
            border-radius: 12px;
            visibility: hidden;
            opacity: 0;
            z-index: 1;
        }

.naslovBesedila {
            font-size: 16px;
            font-weight: normal;
            text-decoration: none;
            color: black;
        }

.naslov:hover .naslovBesedila {
            visibility: visible;
            opacity: 1;
        }

@media screen and (max-width: 480px) {
            .naslovBesedila {
                max-width: 100%;
                word-break: break-all;
            }
        }

@media screen and (max-width: 230px) {
            .naslov {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="naslov">BESEDILO
        
        <div class="naslovBesedila">Dobrodošli v moji vadnici!</div>
    </div>
</div>
</body>
</html>