Latest web development tutorials

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>

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>

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>

tente »