2

Tenho uma seguinte div com uma imagem, o título e algumas opções. Vejam:

inserir a descrição da imagem aqui

.truncate {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="item thumb">
  <div class="thumbnail"><img src="../img/img.png" />
    <div class="caption truncate" style="width: 100px">
      <span>Negreiros supermercados</span>
    </div>
    <button type="button" class="btn btn-link btn-xs">5 lojas</button>
  </div>
</div>

Gostaria de ao passar o mouse em cima do título e tiver as reticencias [...], somente se tiver reticências, aparecesse o título completo em um Tooltip(por exemplo). Qual maneira mais simples de fazer isso?

1 Resposta 1

3

A mais simples de todas seria passar o texto atraves do atributo title

.truncate {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="item thumb">
  <div class="thumbnail"><img src="../img/img.png" />
    <div class="caption truncate" title="Negreiros supermercados" style="width: 100px">
      <span>Negreiros supermercados</span>
    </div>
    <button type="button" class="btn btn-link btn-xs">5 lojas</button>
  </div>
</div>

3
  • 1
    Mas assim, caso o texto esteja mostrando completamente, eu não precisaria do atributo title
    – viana
    29/08/2017 às 21:09
  • 2
    Mas se o título for exibido por completo, ninguém vai precisar parar o mouse em cima pra ler o title, que não vai fazer diferença. 29/08/2017 às 23:12
  • exato, o fato do texto estar completamente visivel, não faz com que se faça necessário inibir o title pois ele é um elemento que demanda uma interação do usuário.
    – Will Ramos
    30/08/2017 às 15:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .