jQuery – Show Tooltip on Long Text with Ellipsis AKA DOTDOT

Sometimes in grids, we have long strings of data to show in cells, but they not only distort the UI but also make all data visible even when not necessary. So to resolve these scenarios what we can do is to show access data in tooltip on hover and by default exceeding data from a limit be hidden in the ellipse or what we say DOTS (…). This method makes grid balanced to see, more compact and clean to analyze.

Here we will use the bootstrap tooltip to show excess string in cells and also use some jQuery methods, and a pinch of CSS to make it work smooth.

Let’s get started…

HTML

JavaScript

CSS

See working demo here

Leave a Reply

avatar
  Subscribe  
Notify of