Adicionar texto flutuante sem JavaScript, como passamos o mouse sobre o nome de um usuário

Adicionar Texto Flutuante Sem Javascript Como Passamos O Mouse Sobre O Nome De Um Usuario



Em muitas páginas da web, costumamos visualizar um texto que aparece em um determinado elemento quando passamos o mouse sobre ele e desaparece quando movemos o cursor em algum outro lugar da tela. Esse texto é chamado de texto flutuante. Em JavaScript, é fácil adicionar o texto flutuante em um elemento. Mas também é possível adicionar um texto flutuante em um documento HTML usando o botão “
” elemento ou o “ ” com o atributo title.

Este artigo demonstrará dois métodos úteis para adicionar um texto flutuante em HTML sem usar JavaScript:

Método 1: adicionar texto flutuante por meio do elemento “div”

Um texto flutuante pode ser adicionado simplesmente usando o botão “

” elemento com o “ título ” atributo na abertura “ ”. O desenvolvedor precisa adicionar o texto flutuante no atributo “title” dentro do “
” tag de abertura e o elemento HTML é adicionado entre a abertura e o fechamento “
' Tag. O texto dentro do “
” elemento container pode ser de qualquer tipo. Por exemplo, um “

' cabeçalho, '

” elemento de parágrafo ou um texto simples simples.







Exemplo

Vamos escrever um exemplo simples para adicionar o '

” para adicionar o texto flutuante sobre um elemento HTML:



< div título = 'Este é o texto flutuante' > Passe o mouse sobre mim! < / div >

De acordo com o código acima:



  • A '
    ” elemento foi adicionado com o “ título ” atributo na abertura “
    ' marcação.
  • O ' título ” contém o texto que deve ser exibido enquanto o usuário passa o cursor do mouse sobre o texto.
  • Entre a abertura e o fechamento”
    ” tags é o texto que será exibido na interface passando o mouse sobre o qual exibirá o texto do foco.

O exemplo adicionado acima exibirá a seguinte saída:





Método 2: adicionar texto flutuante por meio do elemento 'span'

Um texto flutuante também pode ser adicionado usando o botão “ ” elemento em HTML. Tudo o que é necessário é adicionar o texto flutuante no atributo de título e o elemento HTML real para o qual o texto flutuante é adicionado entre a abertura e o fechamento “ ' Tag.



Exemplo

Vamos adicionar um exemplo simples para inserir o “ ” no documento HTML com a finalidade de adicionar o texto flutuante sobre um elemento HTML:

< período título = 'Este é o texto flutuante' >Passe por cima de mim!< / período >

No exemplo acima:

  • A ' ” elemento foi adicionado com o “ título ” atributo dentro da abertura “ ' marcação.
  • O ' título ” contém o texto que deve ser exibido quando o usuário passa o mouse.
  • Entre a abertura e o fechamento “ ” tags é o texto que será exibido para o usuário que passar o mouse sobre o qual exibirá o texto do foco.

Saída

Isso resume os métodos possíveis para adicionar um texto flutuante sem usar JavaScript.

Conclusão

Um texto flutuante pode ser facilmente adicionado em HTML sem exigir o uso de funções JavaScript. O desenvolvedor precisa usar o “

” elemento ou o “ ” que cria o elemento HTML e, em seguida, adiciona o atributo title definindo o texto flutuante. Esta postagem é um bom guia sobre o método para adicionar o texto flutuante sem a necessidade de JavaScript.