Comunidade Vida Evangélica


Tooltip responsivo


Tootltip responsivo

O código html5 abaixo

<span title="">palavra</span>

faz a descrição do termo quando o mouse é colocado sobre a palavra, isto no PC.

No celular não funciona assim pois não tem o mouse. A seguir explicamos como contornar esta situação.

De fato, o atributo title no elemento <span> ou em outros elementos HTML é amplamente utilizado para exibir uma dica de ferramenta (tooltip) quando o mouse é colocado sobre o elemento. No entanto, em dispositivos móveis ou touchscreen, isso geralmente não funciona da mesma forma, já que não há um evento de "hover" (pairar) reconhecível.

Para contornar isso, você pode usar JavaScript ou bibliotecas de interface do usuário para criar uma experiência semelhante que funcione tanto em desktops quanto em dispositivos móveis. Aqui está um exemplo básico de como implementar uma solução para dispositivos touchscreen:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tooltip Responsivo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 5px;
            border-radius: 5px;
            position: absolute;
            bottom: 150%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip:hover .tooltip-text,
        .tooltip:focus .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        /* Para dispositivos touchscreen */
        .tooltip-text.show {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>
    


        Aqui está uma palavra
            Descrição da palavra
         com uma tooltip responsiva.
    


    
</body>
</html>

Como funciona:

  1. HTML: O texto e a descrição são agrupados em um contêiner .tooltip.

  2. CSS: Estiliza a dica de ferramenta (tooltip), tornando-a oculta por padrão e visível quando o elemento é focado ou clicado.
    3. JavaScript: Em dispositivos touchscreen, o evento click exibe ou oculta a tooltip. Adiciona um evento global para ocultar a tooltip quando o usuário clica fora dela.
Benefícios: Funciona em desktops com hover (passar o mouse). Funciona em touchscreens com click. Design responsivo e amigável.

Livros sobre Saúde




Redes Sociais

   FaceBook   Twitter   Linkedin   Pinterest   YouTube   Blogs  
Contribua.Somente se você puder e quiser
Contribua
Somente se você puder e quiser.
Deus abençoe você e toda a tua família.
Amigos na Fé