最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Show text overflow in the form of a tooltip - Stack Overflow

programmeradmin2浏览0评论

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?

Share Improve this question asked May 11, 2017 at 10:58 JDoeBlokeJDoeBloke 5914 gold badges8 silver badges19 bronze badges 1
  • What did you try regarding the tooltips? – Dekel Commented May 11, 2017 at 11:03
Add a ment  | 

2 Answers 2

Reset to default 3

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>

发布评论

评论列表(0)

  1. 暂无评论