CSS3 Tooltips For WordPress

CSS3 Tooltips For WordPress is a lightweight, easy-to-use tooltips plugin for WordPress. It's based on pure CSS3 and comes loaded with 50 predefined CSS3 styles, 10 different tooltip positions, optional tooltip headers, support for images and videos, adjustable delay, notification icons, tooltips On Hover over element and On Click and support for mobile devices.

Plugin comes with shortcode generator and global settings with nice feature to display CSS3 Tooltips for all links by default.

Full List Of Features

  • Create a Tooltip In Minutes!
  • On Hover And On Click Tooltips
  • Support For Mobile Devices
  • Lightweight - Based On Pure CSS3 Code
  • Build-In Shortcode Generator
  • Build-In Global Settings
  • Global Links To Tooltips Conversion
  • Create Tooltips In Minutes By Using Tooltip Shortcode Generator
    • Define The Content Wrapped By The Tooltip
    • Add Optional Tooltip Header
    • Specify The Tooltip Content That Will Appear In The Tooltip Cloud
    • Add Image Or Video That Will Appear In The Tooltip Cloud
    • Choose From 10 Available Tooltip Positions
    • Choose From 50 Available Tooltip Styles
    • Ability To Specify Custom CSS Code Or Class That You Want To Use For The Tooltip
    • Ability To Define Fixed Tooltip Width
    • Ability To Define Tooltip HTML Wrapping Tag
    • Ability To Define Tooltip Delay In Ms.
    • Ability To Define On Hover Or On Click Event
    • Custom Tooltip Cursors On Hover To Choose From
  • Global Tooltips Configuration Panel
    • Ability To Display CSS3 Tooltips For All Links By Default. Tooltip Content Will Be Retrieved From Title Attribute. This Setting Will Applies To All The Posts And Pages
    • Ability To Choose Default Tooltip Position And Style
    • Ability To Choose Default Tooltip Tag, Delay, Cursor, Custom CSS Code Or CSS Class Applied To The Tooltip
    • Ability To Define On Hover Or On Click Event
  • Valid HTML5 Code
  • Crossbrowser Compatible
  • Documentation With Step-By-Step Guide Included

Instructional Video

Step-by-step Guide

Plugin installation & dummy data import

To install CSS3 Tooltips For WordPress plugin please login to your WordPress Dashboard and go to 'Plugins->Add New' panel, now click on 'Upload' option located in top left corner of the page. Over there you can select plugin .zip file located on your computer, use 'Install Now' button and after successfull installation you can activate the plugin.
To import dummy content please go to 'Toolts->Import' panel and use 'WordPress' option, now you need to select 'dummy-content.xml' file(included in plugin archive) and upload it to WordPress. Another 'Import WordPress' window will appear, now you need to set two options. In 'Assign Authors' section select your WordPress user(usually admin) from dropdown menu and in 'Import Attachments' check the 'Download and import file attachments' option. Begin importing the dummy data, after that you should have new page called 'CSS3 Tooltips Preview' which displays sample Tooltip content.

Configuration of Tooltip Shortcode

CSS3 Tooltips For WordPress provides useful shortcode generator utility that makes it easy to create&edit tooltip shortcodes. It's availble in Visual Editor and can be used while editing posts and pages.
Please watch this video for a quick step-by-step instructions.

In order to create a tooltip shortcode, you need to select the text in Visual Editor and then click on 'Generate Tooltip Shortcode' icon as seen on below screenshot:

New popup window will appear, over there you can configure tooltip parameters:

Above screenshot displays basic tooltip settings, each field has short description explaining its purpose.
'Tooltip Content' field allows you to add text and media content like images and videos(Vimeo and YouTube only). Use 'ADD IMAGE' button to select and insert specific image, for videos please use 'ADD VIDEO' button.
Down below you will find 'Tooltip Style' field, it allows you to select from 50 predefined tooltip styles. You can click on [i] information icon to view samples of all available styles.

In 'ADVANCED OPTIONS' section you can configure several options, that allow better control over the tooltip behaviour. To display more advanced options, please click on 'ADVANCED OPTIONS - SHOW' button below.


Once everything is ready you can click on 'CREATE SHORTCODE' button, this will generate the tooltip shortcode and insert it in Visual Editor. Please see screenshot below:

Final result:


Editing Tooltip Shortcode

If you want to edit an existing tooltip shortcode, you need to select the entire shortcode text in Visual Composer and click on 'Generate Tooltip Shortcode' icon. Previously defined parameters will be automaticaly loaded into configurational popup window.

In shortcode configurational window you can change previous shortcode settings and add new content, at the end just click on 'CREATE SHORTCODE' button, new code will be inserted into Visual Editor.


CSS3 Tooltips plugin allows you to convert all website links into tooltips. This will work for the links located in your posts and pages, the only requirement is that your links have the 'tite' attribute defined, otherwise the conversion will not occur. Value specified in 'title' attribute will be loaded into Tooltip cloud, other attributes assigned to your links (like: rel, target, class, id, etc.) will remain untouched.
Please watch this video for a quick step-by-step instructions.

Below screenshot presents sample text containing few links:

When the 'Links to Tooltip' conversion is disabled in plugin settings page('Settings->CSS3 Tooltips' panel), then the links will act as normal links, please see below:

To enable the conversion, please login to your WP dashboard and go to 'Settings->CSS3 Tooltips' panel. Over there you must check the 'Global Tooltips' option and optionally configure the default settings for Tooltips.

'Default Settings' section allows you to configure several parameters, that affect the Tooltips converted from your Links. This settings will also affect the 'Generate Tooltip Shortcode' window in your Visual Editor, new Tooltips will have above configuration set as default in form fields. Once everything is ready, click on 'Save Changes' button and wait until green 'check' icon appears.

Now refresh your website and check, if your links were converted into tooltips. Please remember that links without 'title' attribute will not be converted.
Below is a screenshot with an example of successfull conversion:

Shortcode

CSS3 Tooltip

You can display tooltip by using below shortcode: 

[css3_tooltip content='Tooltip content displayed in a cloud.' position='top' tag='a' style='style_1']commodo[/css3_tooltip]

Available shortcode parameters:

Parameter Possible values Description
header Text that will appear in tooltip header, omit this parameter to display no header.
content Text that will appear in tooltip cloud.
style style_1
style_2
...
style_50		 Specify the style that will be applied to tooltip. You can select from 50 predefined styles.
position top
top_center
diagonal_right_top
right
diagonal_right_bottom
bottom
bottom_center
diagonal_left_bottom
left
diagonal_left_top		 Specify the tooltip position.
width Specify the tooltip width, omit this parameter to use auto width (tooltip width will adapt automatically to contents within it). Example: 
180px
custom_css Specify a custom CSS code that you want to use for the tooltip. Example: 
border: 1px solid black;
custom_css_class Name of a custom CSS-class that you want to use for the tooltip. The CSS-class itself is to be defined in the style.css file of the theme or another css file.
tag Specify the tag that will wrap the whole text. Default is a tag.
delay 0
100
200
300
500
700		 Set the delay of the tooltip in ms.
cursor default
pointer
help		 Set the cursor, that will be displayed on hover effect.
event hover
click		 Set the event, which will trigger the tooltip popup.

CSS Styles

The plugin uses the following cascade of styles (in order):

  • tooltips_main.css - main style sheet for tooltips,
  • tooltips_styles.css - style for predefined tooltip styles (skins),
  • form.css - default styles for shortcode configuration window,
  • settings.css - default styles for settings panel.

Credits

Icons

  • Home Icons by Everaldo Coelho - LGPL.

Images

Changelog

01 June 2016, ver. 1.4

  • Fix for tooltip not appearing on Windows Phone devices
css3_tooltips.php

14 May 2014, ver. 1.3

  • Fix for tooltip center position bug
  • Fix for small conflict with Visual Composer plugin
css3_tooltips.php
styles/tooltips_main.css

16 April 2014, ver. 1.2

  • Added new option, that allows to convert a text into a tooltip
  • Small CSS style fixes
  • New phrases in the language file
css3_tooltips.php
settings.php
js/settings.js
styles/form.css
styles/settings.css
languages/default.po
languages/default.mo

11 April 2014, ver. 1.1

  • Corrections to the plugin style file, prevents the CSS conflicts with other plugins and themes
  • Added new option 'Custom content CSS', allows to style the Tooltip content
  • Fixed few minor bugs in 'Shortcode Generator' window
form.php
settings.php
js/form.js
js/settings.php
styles/form.css
styles/tooltips_main.css

07 April 2014, ver. 1.0

  • First release

Support

Support for all our items is conducted through our Support Forum.
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.

We're in GMT +1 and we aim to answer all questions within 24 hours (Monday – Friday). In some cases the waiting time can be extended to 48 hours.
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.

© 2014 QuanticaLabs