Ellipsis Tooltip CSS-CodePudding

For the below given html, for class refNum, I want to truncate the string and show ellipsis but when we hover over the p tag (refNum), want to show the whole text.

<div >
          <p >Chrishtoper Benson</p>
          <p >
        123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
Reference T
          </p>
   </div>

Below is the given scss used,

         .right {
                    flex: 2;
                    @include flexbox;
                    @include flex-direction(column);
                    justify-content: flex-end;
                    .name {
                        text-align: right;
                        font-size: 13px;
                        word-break: break-word;
                    }
                    .refNum {
                        text-align: right;
                        font-size: 10px;
                        line-height: 20px;
                        width: 100px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        position: relative;
                    cursor: pointer;
                    }
                    .refNum:hover::before {
                      content: attr(refNum);
                      position: absolute;
                      bottom: -46px;
                      padding: 10px;
                      background: #000;
                      color: #fff;
                      font-size: 14px;
                      white-space: nowrap;
                    }
                }

Please help with the same, as this doesn't work. Thank you in advance. Also want to right-align the refNum.

CodePudding user response：

The below solution simply changes overflow: hidden; to overflow: visible; on hover:

.right {
  flex: 2;
  justify-content: flex-end;
}

.right .name {
  text-align: right;
  font-size: 13px;
  word-break: break-word;
}

.right .refNum {
  text-align: right;
  font-size: 10px;
  line-height: 20px;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  cursor: pointer;
}

.right .refNum:hover {
  overflow: visible;
}

<div >
  <p >Chrishtoper Benson</p>
  <p >
    123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789 Reference T
  </p>
</div>

CodePudding user response：

Resolved with JQuery

$(document).ready(function(e){
        $(document).on("mouseenter",".tooltip-check", function(e){
            if(this.scrollWidth > $(e.target).outerWidth()){
                $(this).attr("title", $(this).text());
            }
            else{
              $(this).removeAttr("title");
            }
        });
    });

.right {
     flex: 2;
     justify-content: flex-end;
}
 .right .name {
     text-align: right;
     font-size: 13px;
     word-break: break-word;
}
 .right .refNum {
     text-align: right;
     font-size: 10px;
     line-height: 20px;
     width: 100px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     position: relative;
     cursor: pointer;
}
 .right .refNum:hover::before {
     content: attr(refNum);
     position: absolute;
     bottom: -46px;
     padding: 10px;
     background: #000;
     color: #fff;
     font-size: 14px;
     white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
          <p >Chrishtoper Benson</p>
          <p >
        123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
Reference T
          </p>
   </div>