Detect ellipsis

2

I have a following div with an image, title, and some options. See:

.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>

I would like to hover the mouse over the title and have the [...] faults, only if you have ellipses, the full title appears in a Tooltip (for example). Which is the simplest way to do this?

    
asked by anonymous 29.08.2017 / 21:50

1 answer

3

The simplest of all would be to pass the text through the title attribute

.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>
    
29.08.2017 / 22:39