{ Sketch }

Guia de aprendizado

Design responsívo: textos flutuantes

Textos flutuantes são informações em balões que surgem na tela quando o usuário passa o cursor do mouse, ou toca, sobre um elemento em que deseja obter mais informação.

Sketch fornece um meio simples de se criar textos flutuantes por meio das seguintes classes:

Classe	Descrição
tooltip	indica que o conteúdo irá fornecer um balão de texto flutuante
tooltip-text	balão de texto flutuante posicionado abaixo do conteúdo fornecido pela classe tooltip sem seta
tooltip-text-top-arrow	balão de texto flutuante posicionado abaixo do conteúdo fornecido pela classe tooltip com seta
tooltip-text-bottom-arrow	balão de texto flutuante posicionado acima do conteúdo fornecido pela classe tooltip com seta

Observe o exemplo abaixo:

<div class="panel small-border-frame border-color-silver">         <p>                  passe o mouse/toque                  <span class="tooltip text-color-blue">                           aqui                           <span class="tooltip-text">                                 meu texto flutuante                           </span>                  </span>         </p></div><div class="panel small-border-frame border-color-silver">         <p>                  passe o mouse/toque                  <span class="tooltip text-color-blue">                           aqui                           <span class="tooltip-text-top-arrow">                                 meu texto flutuante                           </span>                  </span>         </p></div><div class="panel small-border-frame border-color-silver">         <p>                  passe o mouse/toque                  <span class="tooltip text-color-blue">                           aqui                           <span class="tooltip-text-bottom-arrow">                                 meu texto flutuante                           </span>                  </span>         </p></div>

Esse código irá resultar no seguinte conteúdo:

passe o mouse/toque aquimeu texto flutuante