CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Dicas de contexto (Tooltip)

Por Benedito Silva Júnior - publicado em 13/07/2016


A dica de contexto (tooltip) é uma pequena janela aberta quando o mouse é passado por sobre uma palavra ou frase, geralmente destacado do restante do texto, e que fornece alguma informação adicional.

Serão utilizadas as tags <a></a> e <span></span> do HTML/XHTML.

Veja:

<link rel="stylesheet" type = "text/css" href="layout.php" />

Código HTML/XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" /> <head> <link href="estilo.css" rel="stylesheet" type="text/css" /> <title>CSS - Dicas</title> </head> <body> <h1>Exemplo de dica de contexto></h1> <p>A <a href="">dica de contexto <span>Pequena janela aberta quando o mouse é passado por sobre uma palavra ou frase, geralmente destacado do restante do texto.</span></a> é utilizada para fornecer alguma informação adicional sobre o termo destacado. As propriedades que serão utilizadas são: fontes de letras, formatação de textos, cores e fundos, espaçamento, margens e posicionamento.</p> </body> </html>

Código CSS (arquivo estilo.css):

body {font-family: Verdana, Arial, Helvetica, sans-serif; p { font-size: 12pt; text-align: justify; color: #000000; } a { color: #1e1e1e; text-decoration: none; font-weight: bold; padding: 0px; border-bottom: 3px double #5a5a5a; cursor: help; position: relative; z-index: 20; } a:hover { background: transparent; z-index:23; } a span { display: none } a:hover span { color: #5a5a5a; text-align: justify; font-weight: normal; padding: 2px; width: 250px; border: 1px solid #000000; background: #efefef; left: 20px; top: 20px; display: block; position: absolute; } h1 { font-size: 15pt; color: #000000; text-align: center; border-top: 1px solid #000000; border-bottom: 1px solid #000000; margin-bottom: 1px;}


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo