javascript - css Ellipsis, event on 3 dots hovering - Stack Overflow

I have a little question, i have too long text in my cell in table in html, so i use text-overflow property set on ellipsis in css like in this example from w3c: .asp?filename=trycss3_text-overflow and I wonder if I can make for example that popup will show up after hover on that 3 dots on the end of text, is that possible without plicated js code? Or i have to make my own piece of code that will show 3 dots instead of rest of text and then attach on hover function to them or something ?

I have a little question, i have too long text in my cell in table in html, so i use text-overflow property set on ellipsis in css like in this example from w3c: https://www.w3schools./cssref/tryit.asp?filename=trycss3_text-overflow and I wonder if I can make for example that popup will show up after hover on that 3 dots on the end of text, is that possible without plicated js code? Or i have to make my own piece of code that will show 3 dots instead of rest of text and then attach on hover function to them or something ?

• javascript
• html
• css
• ellipsis

Share Improve this question Follow asked Jul 8, 2017 at 22:30 BonusBonus 4311 silver badge88 bronze badges 1

• Try setting title attribute of element with full content. Now whenever you will hover over text a tooltip will be shown with plete text. – Zeeshan Commented Jul 8, 2017 at 22:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can use title attribute of element to achieve your objective without writing any extra code. Just run following snippet and hover over the text to see the result.

.ellipses {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

<div class="ellipses" title="This is some long text that will not fit in the box">This is some long text that will not fit in the box</div>