Truncate String And Display Full Text On Hover - Hover Truncated

File Size: 7.4 KB
Views Total: 1914
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Truncate String And Display Full Text On Hover - Hover Truncated

Hover Truncated is a responsive jQuery text truncation plugin for shortening long text content and replacing the hidden overflow content with an ellipsis.

In addition, users can view the original text in a tooltip box to provide a better experience by hovering over the truncated text. 

How to use it:

1. Download the plugin and insert the JavaScript file jquery.hovertruncated.js after loading jQuery.

<link rel="stylesheet" href="/path/to/jquery.hovertruncated.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.hovertruncated.js"></script>

2. Call the function hoverTruncated on the container element whose text should be truncated. That's it.

<ul class="container">
  <li class="title truncate">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo nibh,
    cursus ut semper a, faucibus nec magna. Nulla pharetra ultricies pulvinar.
  <li class="title truncate">
    Nam fermentum cursus dapibus. Vivamus tristique nulla id condimentum
    feugiat. Sed consectetur velit sit amet libero tempor gravida.
  <li class="title truncate">
    Curabitur scelerisque sodales justo, in tempus velit cursus eu.
    Donec ut nisi volutpat, vehicula purus id, consequat ligula.
    Suspendisse et augue dignissim, rhoncus odio in, pulvinar sapien.

3. Possible plugin options.


  // default data attribute for the truncated text
  dataAttr: 'hover-truncated',

  // default CSS class for the truncated text
  className: 'hover-truncated',

  // shows custom text on hover
  tooltipText: null,

  // tooltip offset
  offsetX: 10,
  offsetY: 10

4. API methods.

// hide the tooltip

// show the tooltip

// update the tooltip content
$('.truncate').hoverTruncated('update', 'jQueryScript!');

// destroy the instance

This awesome jQuery plugin is developed by lyushenko. For more Advanced Usages, please check the demo page or visit the official website.