jQuery ellipsis tooltip plugin that cuts long text strings to fit on a single line, and displays overflow text in a tooltip on mouseover. It is based on the Bootstrap framework.

jquery truncate string, jquery truncate text with ellipsis, jquery truncate text and expand, jquery trim string after character, remove &nbsp from string jquery

How to make use of it:

1. Download and import the jquery.ellipsisTooltip.js script into the Bootstrap project.

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.ellipsisTooltip.js"></script>

2. Call the plugin/extension on the cover of the text.

$(".demo").ellipsisTooltip()

3. You can also use the data-ellipsis="true" attribute in the body wrapper to configure the plugin automatically.

<h1 data-ellipsis="true">Long Text Here</a>

4. Customization options.

// custom html content to diplay in the tooltip
content: undefined,

// parent container
parent: $ellipsis.parent(),

// parent container width
width: $ellipsis.parent().width(),

// bind window resize event
resize: true,

// the position of the tooltip
placement: "top",

// tooltip's parent container
container: "body",

// tooltip template
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: 250px; word-wrap: break-word"></div></div>'

lightweight jquery text truncation & tooltip, jquery.ellipsisTooltip Plugin/Github

See Demo And Download

Official Website(anton-permiakov): Click Here

This superior jQuery/javascript plugin is developed by anton-permiakov. For extra advanced usage, please go to the official website.