Give 2.0 – Welcome Hint.css and Goodbye qTip2

In Give version 2.0+ we are deprecating  qTip2 (with backward compatibility, of course) and all tooltips (frontend + backend) will be generated with the new Give_Tooltips class. We’ve put a lot of work into this new class so it can handle all the various types of tooltips supported by hint.css, a pure CSS solution. Now you can create flexible tooltips based on your specific needs with a simple setup and the flexibility you expect from a professionally developed WordPress plugin.

Our hope is that this update frees you from having to spend time writing any complex code for your custom Give tooltips. As well, it will give your users a better experience and also add a little speed boost to your sites since no additional JS is needed. Finally, since this is a pure CSS solution, this update also reduces the chances of potential conflicts with other scripts. Let’s explore further:

The Types of Tooltips

You can create multiple types of tooltips by specifying different properties:

  1. Position:
    1. Top
    2. Top Right
    3. Top Left
    4. Right
    5. Left
    6. Bottom
    7. Bottom Right
    8. Bottom Left
  2. Status:
    1. Error
    2. Warning
    3. Info
    4. Success
  3. Size:
    1. Small
    2. Medium
    3. Large
  4. Display:
    1. Show always
    2. Show on mouse hover
  5. Style:
    1. Square edges
    2. Round Edges
  6. Animation:
    1. No animation
    2. Bounce animation

How to Create Tooltips in Give 2.0+

Here is a general code sample to create a tooltip with Give_Tooltip with Give 2.0+:

    // Tooltip tag.
    'tag'         => '',
    'tag_content' => '',

    // Set to link of anchor if tooltip tag is anchor.
    'link'        => '#',

    // Text for tooltip
    'label'       => '',

    // Value: top-right, top, top-left, right, left, bottom-right, bottom, bottom-left.
    'position'    => 'top',

    // Value: error, warning, info, success.
    'status'      => '',

    // Value: small, medium, large.
    'size'        => '',

    // Value: true/false.
    'show_always' => false,

    // Value: true/false
    'round_edges' => false,

    // Value: true/false
    'animate'     => true,

    // Attributes.
    'attributes'  => array(),

    // Value: true/false
    // If set to true then automatically core will set size for tooltip on basic of word count of label. 
    'auto_width'  => true,

There are also some helper functions to quickly create tooltips:

/* The function below also accepts an array */
// Output span with question icon.
Give()->tooltips->render_help(/* Tooltip Text */);

/* The function below also accepts an array */
// Output span.
Give()->tooltips->render_span(/* Tooltip Text */);

// Output link.
Give()->tooltips->render_link(array( /*tooltip setting values*/ ));

This update is just one of many optimizations we’ll be releasing in the next major version of Give. Stay tuned for more!


Ravinder Kumar

Open source lover, the father of a daughter, continually improving developer, and Senior WordPress Engineer at GiveWP.


Leave a Comment