How to Use CSS to Show on Hover Tool-Tips Using the Same Text Which Is Shortend With Ellipses

table tbody td {width:100px;max-width:130px;white-space: nowrap;  text-overflow: ellipsis;  overflow-x: hidden;}            [data-tooltip] {              position: relative;              z-index: 1000000 !important;              cursor: pointer;              margin: 0 auto;            }
            /* Hide the tooltip content by default */            [data-tooltip]:before,            [data-tooltip]:after {              visibility: visible;              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";              filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";              opacity: 1;              pointer-events: none;              transition: all 0.5s ease-out;            }
            /* Position tooltip above the element */            [data-tooltip]:before {              position: absolute;              top: -60%;              padding: 5px 10px;              width: auto;              left: 50%;              transform: translateX(-50%);              margin: 0 auto;              -webkit-border-radius: 3px;              -moz-border-radius: 3px;              border-radius: 3px;              background-color: #000;              background-color: hsla(0, 0%, 20%, 0.9);              color: #fff;              content: attr(data-tooltip);              text-align: center;              font-size: 11px;              line-height: 1.2;            }
            /* Triangle hack to make tooltip look like a speech bubble */            [data-tooltip]:after {              position: absolute;              top: 5%;              left: 50%;              transform: translateX(-50%);              width: 0;              border-top: 5px solid #000;              border-top: 5px solid hsla(0, 0%, 20%, 0.9);              border-right: 5px solid transparent;              border-left: 5px solid transparent;              content: " ";              font-size: 0;              line-height: 0;            }
            /* Show tooltip content on hover */            [data-tooltip]:hover:before,            [data-tooltip]:hover:after {              visibility: visible;              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";              filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";              opacity: 1;              transition: all 0.5s ease-in;            }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><div class="table-responsive"><table class="table"><thead><tr><th>Caption 1</th><th>Caption 2</th><th>Caption 3</th><th>Caption 4</th><th>Caption 5</th><th>Caption 6</th></tr></thead><tbody><tr><td >Some data Some data Some data Some data </td>
<td data-tooltip="Some data Some data Some data Some data">Some data Some data Some data Some data </td>
<td >Some data Some data Some data Some data </td>
<td >Some data Some data Some data Some data </td>
<td >Some data Some data Some data Some data </td>
<td >Some data Some data Some data Some data </td></tr></tbody></table></div>

Showing truncated text on hover using CSS ellipsis overlaps text below it

You can just add height:auto to the hover state and it'll work just fine:

JS Fiddle

.name{    width:120px;    color: #0079c1;    height: 2em;     line-height: 1em;     font-size: 20px;    font-weight: 400;    text-overflow: ellipsis;    margin-bottom: 12px;    cursor: pointer;    word-break: break-all;    overflow:hidden;    white-space: nowrap;}.name:hover{    overflow: visible;     white-space: normal;    height:auto;  /* just added this line */}

<p class="name">Lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum</p><span>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem voluptate deserunt consequatur velit, alias ullam fuga aspernatur, ut doloremque eos fugiat quo a accusamus minus distinctio quasi, recusandae excepturi molestiae.</span>

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
}

.ellipsis.multiline {
    white-space: normal;
}

<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>

(function($) {
    $.fn.ellipsis = function()
    {
        return this.each(function()
        {
            var el = $(this);

            if(el.css("overflow") == "hidden")
            {
                var text = el.html();
                var multiline = el.hasClass('multiline');
                var t = $(this.cloneNode(true))
                    .hide()
                    .css('position', 'absolute')
                    .css('overflow', 'visible')
                    .width(multiline ? el.width() : 'auto')
                    .height(multiline ? 'auto' : el.height())
                    ;

                el.after(t);

                function height() { return t.height() > el.height(); };
                function width() { return t.width() > el.width(); };

                var func = multiline ? height : width;

                while (text.length > 0 && func())
                {
                    text = text.substr(0, text.length - 1);
                    t.html(text + "...");
                }

                el.html(t.html());
                t.remove();
            }
        });
    };
})(jQuery);

 .info-slide:hover, .info-slide:active{
   height:300px;
 }