JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div data-truncated="true" data-original="Quickly optimize 24/365 content after 2.0 best practices. Competently incubate vertical deliverables through principle-centered technologies. Collaboratively maximize."> Quickly optimize 24/365... </div>

CSS

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css');

JavaScript

$.fn.autoTruncate = function () {


	if (!this.length) { return; }

	this.each(function (i, el) {
		var fullData = $(el).data('original'),
            truncateIcon;

		truncateIcon = $('<img />', {
			src: 'http://i61.tinypic.com/2eykprp.png', // Your image here
			alt: 'Read More'
		});

		if (!fullData || fullData === "") {
			return;
		}

		truncateIcon.attr('data-original-title', fullData);

		$(el)
			.removeAttr('data-original')
			.append(truncateIcon);

		truncateIcon.tooltip({
            placement: 'bottom'
        });
	});
};

$('[data-truncated]').autoTruncate();