Essential Grid Filter Tooltips

This article will show you how to display tooltips when you hover your Essential Grid Filters.

Preview:

Filter All
Entertainment
Modern
Scenery
  • Post 1
  • Post 2
  • Post 3
  • Post 4
  • Post 5
  • Post 6
  • Post 7
  • Post 8
  • Post 9
  • Post 10
  • Post 11
  • Post 12

1. Make sure the filters you'd like to use are also selected as the grid's main source.

2. Add the "filter" element to your Grid, and then select your filters.

3. Insert the Custom JS code below into JS section of your grid and configure the "Tooltip Texts"

4. Add the following CSS inside the Item Skin Editor

  • Quick Note:
    You may refer to the comments on the Custom CSS code to change the "Texts" color, positioning and paddings.