Show text overflow in the form of a tooltip

Question

I've got something like this.

<div class="someclass">
    <label data-fieldid="191366" data-val="159" class="evLabel form-control">
        Some Long Text
    </label>
</div>

I made it so, that if the text is too long than the overflow hides by writing text-overflow:elipsis, overflow: hidden, and white-space:nowrap.

I need to make it show tooltip-ish popup with the entire text (Some Long Text) on hover and possibly when it does know when this elipsis is actually hiding something (So, when it is necesary). How to do something like that?

What did you try regarding the tooltips? – Dekel May 11 '17 at 11:03 — Dekel, May 11 '17 at 11:03

score 3 · Answer 1 · edited May 23 '17 at 10:31

If you need modification in this, please comment. You can also check this LINK

div {
  line-height: 20px;
}

#data {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#data:hover {
  overflow: visible;
  white-space: normal;
  width: auto;
  position: absolute;
  background-color: #FFF;
}

#data:hover+div {
  margin-top: 20px;
}

<div>1: ONE</div>
<div id="data">2: Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two </div>
<div>3: THREE</div>
<div>4: Four</div>

score 1 · Answer 2 · edited Apr 15 '21 at 07:56

1

Try the Below code example :

label {
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  width: 50px;
}

<label for="x" title="Long Long Long ............... Text">Long Long Long ............... Text</label>

edited Apr 15 '21 at 07:56

Ruben Helsloot

12,582
6
26
49

answered May 11 '17 at 11:03

Younis Ar M

913
6
15

I've tried that but it's not pretty looking. I also need it to be stylised. – JDoeBloke May 11 '17 at 11:11
can you share a example of how you want it to be styled? – Younis Ar M May 11 '17 at 12:30

Show text overflow in the form of a tooltip

2 Answers2