Press "Enter" to skip to content

One-Line Clipped With An Ellipsis and Displays a Tooltip When Scrolling | Hover Truncated

jQuery Hover Truncated is a simple jQuery extension that truncates text into a single line broken with an ellipsis and displays a tooltip when scrolling. Hover Truncated is a responsive jQuery text truncation plugin that shortens long text content and replaces hidden overflow content with an ellipsis.

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

truncate the text and show it on mouseover, on hover show full text tooltip, text overflow ellipsis hover tooltip, text overflow ellipsis show on hover tooltip, truncate the text and show it on mouseover

How to make use of 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 component whose text needs to be truncated.

<ul class="container">
  <li class="title truncate">
    jQuery Hover Truncated is a simple jQuery extension that truncates text into a single line broken with an ellipsis and displays a tooltip when scrolling.
  </li>
  <li class="title truncate">
    Nam fermentum cursus dapibus. Vivamus tristique nulla id condimentum
    feugiat. Sed consectetur velit sit amet libero tempor gravida.
  </li>
  <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.
  </li>
</ul>
$(function(){
  $('.truncate').hoverTruncated();
});

3. Possible plugin choices.

$('.truncate').hoverTruncated({

  // 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 strategies.

// hide the tooltip
$('.truncate').hoverTruncated('hide');

// show the tooltip
$('.truncate').hoverTruncated('show'); 

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

// destroy the instance
$('.truncate').hoverTruncated('destroy');   

Truncate String And Display Full Text On Hover, jQuery Hover Truncated Plugin/Github, on hover show full text tooltip jquery, text overflow ellipsis show tooltip


See Demo And Download

Official Website(lyushenko): Click Here

This superior jQuery/javascript plugin is developed by lyushenko. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.