How do I use css to show on hover tool-tips using the same text which is shortend with ellipses?

Question

I have the example where some of the strings are too long and I want them shortened. However, I want to be able to see the entire string when I hover my mouse over it.

.don_single_donatori {
  width: 250px;
  min-height: 310px;
}

.overview span {
  text-overflow: ellipsis;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

.overview em {
  font-style: normal;
  color: #000;
  float: right;
}

<div class="don_single_donatori">
  <div class="viewport">
    <div class="overview">
      <p><span>This is my full name which should be shortend</span><em>2.000,00 EUR</em></p>
      <p><span>Anonymous</span><em>2.000,00 EUR</em></p>
      <p><span>Anonymous</span><em>500,00 EUR</em></p>
      <p><span>This is another long name that needs shortening</span><em>2.000,00 EUR</em></p>
      <p>Anonymous<em>2.000,00 EUR</em></p>
    </div>

Most approaches I found online use two strings, i.e. the text that you hover over with a mouse is seperate from the text you use for a tooltip (like in the post here). But in my case I have the same text. Having two entries for the same text seems redundant.

just in case: solution with `content: attr(title)` does allow you to use nested HTML tags. Or actually it allows but they will not be rendered as HTML. — skyboyer, Apr 27 '18 at 18:38

Popmedic · Accepted Answer · 2018-05-20T16:36:23.663

Can't you just use the title attribute of the span???

<style>
.don_single_donatori {
  width: 250px;
  min-height: 310px;
}

.overview span {
  text-overflow: ellipsis;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

.overview em {
  font-style: normal;
  color: #000;
  float: right;
}
</style>
<div class="don_single_donatori">
    <div class="viewport">
        <div class="overview">
            <p><span title="This is my full name which should be shortend">
            This is my full name which should be shortend
            </span><em>2.000,00 EUR</em></p>
            <p><span>Anonymous</span><em>2.000,00 EUR</em></p>
            <p><span>Anonymous</span><em>500,00 EUR</em></p>
            <p><span title="This is another long name that needs shortening">
            This is another long name that needs shortening
            </span><em>2.000,00 EUR</em></p>
            <p>Anonymous<em>2.000,00 EUR</em></p>
        </div>
    </div>
</div>

If you don't want duplicate text, use a CSS selector so that if the span has a title, use the title for content. Then just remove the content in spans with a title as so:

<style>
.don_single_donatori {
    width: 250px;
    min-height: 310px;
}

.overview span {
    text-overflow: ellipsis;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

.overview em {
    font-style: normal;
    color: #000;
    float: right;
}
span[title]::before {
    content: attr(title);
}
</style>
<!-- ... -->
<div class="don_single_donatori">
    <div class="viewport">
        <div class="overview">
            <p><span title="This is my full name which should be shortend">
            </span><em>2.000,00 EUR</em></p>
            <p><span>Anonymous</span><em>2.000,00 EUR</em></p>
            <p><span>Anonymous</span><em>500,00 EUR</em></p>
            <p><span title="This is another long name that needs shortening">
            </span><em>2.000,00 EUR</em></p>
            <p>Anonymous<em>2.000,00 EUR</em></p>
        </div>
    </div>
</div>

I believe author can but is looking for different way without duplicating text — skyboyer, Apr 27 '18 at 16:16
Yes,thank you, that will do it, but is there a way to do it without duplicating the text? — magasr, Apr 27 '18 at 16:17
Without duplicating you could place the text as title attribute with span being empty and add it as 'content' to the span using css as shown in my answer: https://stackoverflow.com/a/50066521/9232222 — August, Apr 27 '18 at 16:19

August · Answer 2 · 2018-04-27T17:24:59.520

Extending the @Popmedic answer using attr as content in pseudo element when hover:

<span  title="This is my full name which should be shortend"></span>

CSS

span {
  position: relative;
  border: 1px solid pink;
  text-overflow: ellipsis;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}
span:before {
 content: attr(title);
}
span:hover {
  width: auto;
  border: 1px solid blue;
}

CodePen

score 1 · Answer 3 · answered Apr 27 '18 at 16:29

Make the rest of span show through overflow: visible;, like so:

.overview p span {
  overflow: hidden;
}

.overview p:hover > span {
  padding-bottom: 6px;
  overflow: visible;
}

Example: JSFiddle

You might still want to add more space between span and em so the text doesn't cover the text/numbers in em, but that depends on your design. Good luck!

How do I use css to show on hover tool-tips using the same text which is shortend with ellipses?

3 Answers3