balão Foundation
Balões mover o mouse sobre o elemento após o show:
Podemos adicionar qualquer elemento no data-tooltip
propriedade para criar uma mensagem. Use o title
atributo para definir as dicas de mensagem de texto.
Observação: O regulador exige JavaScript. Então, você precisa inicializar OUNDATION JS:
Exemplos
<Span title-dica de dados = " Hooray!"> Passe o mouse sobre mim! </ Span>
<! - Inicializar Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
<! - Inicializar Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
tente »
.has-tip
classe pode mover o texto em negrito mouse:
Exemplos
<Span class-dica de dados = " tem-tip" title = "Hooray!"> Passe o mouse sobre mim! </ Span>
tente »
posição de exibição do balão
Por padrão, a caixa de alerta aparecerá na parte inferior do elemento.
Você pode usar .tip-top
, .tip-left
, .tip-right
ou .tip-bottom
(padrão) para definir a posição de caixa de diálogo.
Nota: Nos ecrãs de pequena dimensão, a banda larga balão é de 100%.
Exemplos
<Span class-dica de dados = " tem-tip tip-top" title = "Hooray!"> Top </ span>
<Span class-dica de dados = " tem-tip tip-bottom" title = "Hooray!"> Parte inferior </ span>
<Span data-dica class = " tem-ponta ponta-esquerda" title = "Hooray!"> Esquerdo </ span>
<Span class-dica de dados = " tem-tip tip-direita" title = "Hooray!"> Direito </ span>
<Span class-dica de dados = " tem-tip tip-bottom" title = "Hooray!"> Parte inferior </ span>
<Span data-dica class = " tem-ponta ponta-esquerda" title = "Hooray!"> Esquerdo </ span>
<Span class-dica de dados = " tem-tip tip-direita" title = "Hooray!"> Direito </ span>
tente »
balão redondo
.radius
e .round
classe é usada para definir a caixa de pontas arredondadas:
Exemplos
<Span class-dica de dados = " tem-tip" title = "Hooray!"> Padrão </ span>
<Span class-dica de dados = " tem-tip raio" title = "Hooray!"> Radius </ span>
<Span data-dica class = " tem-ponta redonda" title = "Hooray!"> Round </ span>
<Span class-dica de dados = " tem-tip raio" title = "Hooray!"> Radius </ span>
<Span data-dica class = " tem-ponta redonda" title = "Hooray!"> Round </ span>
tente »