CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JDoeBloke
JDoeBloke

Reputation: 591

Show text overflow in the form of a tooltip

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?

Upvotes: 2

Views: 12888

Answers (2)

Younis Ar M
Younis Ar M

Reputation: 941

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>

Upvotes: 2

Nimish
Nimish

Reputation: 1016

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>

Upvotes: 3

Related Questions