JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt mauris a faucibus.</td>
    </tr>
</table>

CSS

table {
    table-layout:fixed;
}
td {
    width:200px;
    display:inline-block;
    background:#4679BD;
    color:#FFF;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

/* ------------------------------
 * Tripper
 * Tooltip
 * ------------------------------*/

	.tipper { height: 1px; left: -99999px; position: absolute; pointer-events: none; top: -99999px; width: 1px; }
	.tipper .tipper-content { background: rgba(0, 0, 0, 0.85); border-radius: 3px; color: #fff; display: block; float: left; font-family: sans-serif; font-size: 12px; margin: 0; padding: 8px 12px; position: relative; white-space: nowrap; }
	.tipper .tipper-caret { background: url(jquery.fs.tipper-icon.png) no-repeat; content: ''; display: block; height: 11px; margin: 0; position: absolute; width: 5px; }

	.tipper.right .tipper-content { box-shadow: 1px 0 3px rgba(0, 0, 0, 0.25); }
	.tipper.right .tipper-caret { background-position: left center; left: -5px; top: 0; }

	.tipper.left .tipper-content { box-shadow: -1px 0 3px rgba(0, 0, 0, 0.25); }
	.tipper.left .tipper-caret { background-position: right center; right: -5px; top: 0; }

	.tipper.top .tipper-caret,
	.tipper.bottom .tipper-caret { display: block; float: none; height: 5px; margin: 0 auto; width: 11px; }

	.tipper.top .tipper-content { box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.25); }
	.tipper.top .tipper-caret { background-position: center bottom; bottom: -5px; left: 0; }

	.tipper.bottom .tipper-content { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
	.tipper.bottom .tipper-caret { background-position: center top; top: -5px; left: 0; }

JavaScript

$('td').bind('mouseenter', function(){
	    var $this = $(this);
	    if(this.offsetWidth < this.scrollWidth){
	        var text = $this.text();
	        $this.attr("data-title",text);
	        $this.tipper({
	        	direction: "bottom",
	        	follow: true
	        });
	    }
    });






/*-------------------------------------------------------------------------------------------
 *
 *      Tooltip
 *
 * -----------------------------------------------------------------------------------------*/

;(function ($, window) {
	"use strict";

	var $body,
		$tipper;

	/**
	 * @options
	 * @param direction [string] <'top'> "Tooltip direction"
	 * @param follow [boolean] <false> "Flag to follow mouse"
	 * @param formatter [function] <$.noop> "Text format function"
	 * @param margin [int] <15> "Tooltip margin"
	 */
	var options = {
		direction: "top",
		follow: false,
		formatter: $.noop,
		margin: 15
	};

	var pub = {

		/**
		 * @method
		 * @name defaults
		 * @description Sets default plugin options
		 * @param opts [object] <{}> "Options object"
		 * @example $.tipper("defaults", opts);
		 */
		defaults: function(opts) {
			options = $.extend(options, opts || {});
			return $(this);
		},

		/**
		 * @method
		 * @name destroy
		 * @description Removes instance of plugin
		 * @example $(".target").tipper("destroy");
		 */
		destroy: function() {
			return $(this).trigger("mouseleave.tipper")
						  .off(".tipper")
						  .removeClass("tipper-attached");
		}
	};


	/**
	 * @method private
	 * @name _init
	 * @description Initializes plugin
	 * @param opts [object] "Initialization options"
	 */
	function _init(opts) {
		options.formatter = _format;
		return $(this).not(".tipper-attached")
					  .addClass("tipper-attached")
					  .on("mouseenter.tipper", $.extend({}, options, opts || {}), _build);
	}

	/**
	 * @method private
	 * @name _build
	 * @description Builds target instance
	 * @param e [object] "Event data"
	 */
	function _build(e) {
		$body =...