tinytooltip.js - WordPress Plugin
Overview
It's a simple WordPress tooltip plugin extended from Twitter Bootstrap's tooltip and popover plugin that supports 12 positions, background color, font color, border color, videos, image map areas, image hotspots, menus and AJAX data loading with responsive behavior.
WordPress Integration
It's easy to install the plugin on WordPress:
1. Installation
You just need the installed "zipped" tinytooltip.zip plugin and activate it. We have optimized the plugin to
use the minified version of js and css files required for the plugin to render the results.
Tinytooltip - shortcodes
Once you will activate the plugin, you will find 2 new menu items on your WordPress dashboard:
- Tinytooltips
- Tinyhotspots
Tinytooltips - post_type
Here you can create reusable tooltips/popovers using the Gutenberg block template created for Tinytooltips. Just click 'Add New' and enter the title. As soon as you will click on 'Tinytooltip' block, it will load the block properties on right side. The properties has 5 sections to setup the different behaviours and styles for the tooltips. The sections are:
- Actions
- Contents
- AJAX
- Styles
- Custom Skin
Once you are done with creating your tooltip, you can copy the generated shortcode and use it on your pages and posts easily.
Example
[tinytooltip id="183"]change your text here[/tinytooltip]
Tinyhotspots - post_type
Here you can create responsive hotspots on images along with responsive tooltips just using mouse clicks. No coding required!
We have already specified the steps required for using the hotspot creator tool on WordPress Tinyhotspot creator posts.
Once you are done with creating all required hotspots and their tooltips, you can use the generated shortcode anywhere on your pages and posts.
Example
[tinyhotspot id="190"]
API Reference
This section is both for developers and end-users who will use the plugin.
Options
RESPONSIVE tooltips
Now responsive option can be used to enable the responsive behavior of tooltip.
Deprecated
Use data-placement="right auto" or your preferred placement (among 12 positions) along with auto to activate responsive behaviour of tooltip/popover.
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backcolor="".
If you are using Gutenberg block in WordPress then all these properties can be setup easily on user interface without any knowledge of coding.
| Name | type | default | description |
|---|---|---|---|
| animation | boolean | true | apply a CSS fade transition to the tooltip |
| action | string | 'tooltip' | automaticlly chooses the template for tooltip/popover. You can specify the action - tooltip | popover. |
| placement | string | function | 'top' |
how to position the tooltip - top-left | top-right | left-top | right-top | top | left | right | bottom | left-bottom | right-bottom | bottom-left | bottom-right | auto. When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
|
| responsive | boolean | true |
If responsive is true it will dynamically reorient the tooltip.
You don't need to use auto placement with this new responsive option.
|
| selector | string | false | If a selector is provided, tooltip objects will be delegated to the specified targets. |
| skin | string | 'default' | enables to specify the predefined color scheme skin name - PacificBlue | PersianRed | PersianRed |
| trigger | string | 'hover focus' | how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. |
| delay | number | object | 0 |
delay showing and hiding the tooltip (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: |
| title | string | function | '' | default title value if title attribute isn't present |
| content | string | function | '' | default content value if data-content attribute isn't present for action - 'popover' |
| html | boolean | false | Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
| container | string | 'body' |
Appends the tooltip/popover to a specific element. Example: container: 'body'.
This option is particularly useful in that it allows you to position the tooltip/popover in the flow of the document near the triggering element -
which will prevent the tooltip/popover from floating away from the triggering element during a window resize.
|
| ajax | boolean | false | enables to use AJAX content loading feature of tinytoolip. |
| ajaxUrl | string | '' | here you can pass the URL to call the AJAX feature. |
| params | JSON | {} | enables to sepcify the key: value pairs of parameters for AJAX callback. |
| method | string | 'GET' | you can set the 'POST' | 'GET' method type to fetch or send the data using AJAX callback. |
| loading | string | 'loading...' | default text value that appears while fetching the data from AJAX callback. |
| error | string | 'error occurred' | default text value that appears if error occurs while executing the AJAX callback. |
| cache | boolean | true | enables/disables the caching of AJAX callback. |
| shadow | boolean | true | enables/disables the shadow effect. |
| opacity | number | 0.9 | enables to set the opacity of tooltip/popover. Value between 0 and 1. |
| borderRadius | number | 4 | sets the border radius of tooltip. |
| border | boolean | true | shows/hides the border around the tooltip. |
| padding | number | 8 | adds the padding between border and content of tooltip/popover. |
| minWidth | number | 0 | enables to set the minumum width for tooltip/popover. |
| maxWidth | number | 350 | enables to set the maximum width of tooltip/popover. |
| textalign | string | 'center' | specifies the text align for tooltip/popover content - left | right | center. |
| backcolor | string | '#000000' | Color name or Hex-code for setting the background color. |
| textcolor | string | '#ffffff' | Color name or Hex-code for setting the font color. |
| bordercolor | string | '#ffffff' | Color name or Hex-code for setting the border color. |
| titleBackcolor | string | '#f7f7f7' | Color name or Hex-code for setting the background color of popover titles. |
| titleBordercolor | string | '#ebebeb' | Color name or Hex-code for setting the border color of popover titles. |
| titleTextcolor | string | '#444444' | Color name or Hex-code for setting the font color of popover titles. |
| contentBackcolor | string | '#ffffff' | Color name or Hex-code for setting the background color of popover content area. |
| contentTextcolor | string | '#444444' | Color name or Hex-code for setting the font color of popover content. |
| menuLinkcolor | string | '#ffffff' | Color name or Hex-code for setting the font color of menu item links. |
| menuHoverLinkcolor | string | '#000000' | Color name or Hex-code for setting the mouse over font color of menu item links. |
| menuHoverBackcolor | string | '#ffffff' | Color name or Hex-code for setting the mouse over background color of menu item links. |
| menuItemDividercolor | string | '#ffffff' | Color name or Hex-code for setting the divider border color between menu item links. |
| arrowcolor | string | '#ffffff' | Color name or Hex-code for setting the arrow color of tooltip/popover. |
Data attributes for individual tooltips
Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
Examples
Positions
| top-left | top | top-right |
| left-top | right-top | |
| left | right | |
| left-bottom | right-bottom | |
| bottom-left | bottom | bottom-right |
Usage
You can specify the different data-placement attribute values to set the tooltip positions around the target element.
WordPress
Gutenberg block -> Actions -> Placement [Option]
Color Presets
| backcolor | textcolor | bordercolor | preview |
|---|---|---|---|
| #0099cc | preview | ||
| #6633cc | preview | ||
| #990099 | preview | ||
| #0066cc | preview | ||
| #cc3333 | preview | ||
| #009900 | preview | ||
| #e06666 | preview | ||
| #ccffff | #333333 | #33ffff | preview |
| #ccccff | #333333 | preview | |
| #ffcccc | #333333 | preview | |
| #99ccff | #333333 | preview | |
| #ffcc99 | #333333 | #cc9999 | preview |
Usage
You can specify the different data-backcolor, data-textcolor and data-bordercolor attribute values to change the background, font and border color of tooltip wrapper.
WordPress
Use Skin = "Custom" for using these properties.
Gutenberg block -> Styles -> Skin [Option]
Gutenberg block -> Custom Skin -> Tooltip Back Color [Option]
Gutenberg block -> Custom Skin -> Tooltip Text Color [Option]
Gutenberg block -> Custom Skin -> Tooltip Border Color [Option]
Skin Presets
| skin | preview |
|---|---|
| PacificBlue | preview |
| PurpleHeart | preview |
| DarkMagenta | preview |
| NavyBlue | preview |
| PersianRed | preview |
| IslamicGreen | preview |
| Roman | preview |
| LightCyan | preview |
| LavenderBlue | preview |
| Cosmos | preview |
| SkyBlue | preview |
| PeachOrange | preview |
Usage
You can specify the data-skin attribute value to change the background, font and border color of tooltip wrapper.
WordPress
Gutenberg block -> Styles -> Skin [Option]
Popovers
|
|
Usage
You can use the data-action="popover" in HTML code or action: 'popover' option in jQuery method to set the tinytooltip behaviour and style as popover.
WordPress
Gutenberg block -> Actions -> Action [Option]
Image Hotspots
Usage
You can use Tinyhotspot tool to create image hotspots with tooltips and embed their shortcode on pages or posts.
Example
[tinyhotspot id="190"]
Image Templates
Usage
You can use the title option in jQuery method to set the tooltip image template or
content option to set the popover image template.
It renders the HTML template in tooltip/popover container.
WordPress
Gutenberg block -> Toolbar -> Image Icon
It will insert default image template into the text box, you can modify it according to your requirements - Basic HTML knowledge required.
Video Tooltips
Usage
You can use the title option in jQuery method to set the responsive tooltip video template or
content option to set the popover video template.
WordPress
Gutenberg block -> Toolbar -> Video Icon
It will insert default video template into the text box, you can modify it according to your requirements - Basic HTML knowledge required.
AJAX Loading
Usage
You can use a set of AJAX option to implement the dynamic content loading.
Here you can use cache, ajax, params options to load the dynamic content using AJAX callback.
WordPress
Gutenberg block -> AJAX -> Cache [Option]
Gutenberg block -> AJAX -> Ajax [Option]
Gutenberg block -> AJAX -> Params [Option]
You use following JSON type to pass the parameters:
{
"action":"ggfx_tinytooltip_get_server_time",
"param1":"1"
"param2":"2"
}
WordPress Coding knowledge required.
Event Triggers
| Event Trigger | Description |
|---|---|
| click | It shows/hides the tooltip on click event of target element. |
| hover | It shows/hides the tooltip on mouse over and mouse leave event of target element. 'hover' is the default trigger. |
| hoverable | It shows the tooltip on mouse over event of target element an enables the user to move the mouse pointer over the tooltip content. |
| on Focus | It shows the tooltip on focus event of input fields and hides the tooltip on blur event of field. |
WordPress
Gutenberg block -> Actions -> Trigger [Option]