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?

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?

• javascript
• jquery
• html
• css

• What did you try regarding the tooltips? – Dekel Commented May 11, 2017 at 11:03

2 Answers 2

If you need modification in this, please ment. 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>

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>