Follow for free plugins, new theme releases and theme news
Plugin Description
This is a simple plugin designed to allow styled info-popups (or tooltips) to appear in response to a user mouse-over or click of a target element, using WordPress shortcodes. The shortcode for this plugin’s operation is ‘infopopup’.
You may create as many popups and associated targets as you like, each distinguished by a unique ‘tag’. A popup with the tag ‘firstpopup’ can be included in any page by using the plugin’s shortcode followed by a colon (:) and the tag, so:
[infopopup:firstpopup]
INSTRUCTIONS:
To get started, enable the plugin and go to Settings > InfoPopup.
You will see an empty table, where popups you create will be listed. Begin by clicking the ‘Add new’ button.
Use the ‘Create new InfoPopup’ page to specify how your popup will work:
- Shortcode tag:
This is how your popup is uniquely identified, and as the field label suggests, the tag will be appended to the shortcode ‘infopopup’ within your page. This allows you to have more than one popup in any page, each with its own unique tag.
Whether the plugin is case-sensitive depends on whether your database is configured to be case-sensitive. In other words, if the database supporting your WordPress site is case-insensitive (and in most cases, MySQL is set up to be case-insensitive) then the tags ‘THIS’ and ‘this’ are the same.
-
Title:
This is how the link (or ‘target’) will appear. The plugin will handle markup here so may be an image; see comments under ‘Position’ below if you do want to use an image instead of plain text for the title.
-
Action:
Choose whether the popup should appear when a user moves the mouse over the target or, alternatively, whether the link has to be clicked. If you choose ‘mouse-over’, the popup will disappear when the mouse is moved away from the target (rather like a standard tooltip); if you choose ‘click’, then the popup will disappear when it is clicked.
-
Content:
Whatever you want to appear in the popup should be typed or pasted here. You are free to use HTML, but take care that any opening tags (especially ‘block’ tags like ‘p’ and ‘div’) are closed. Also, because this content will be appearing within an HTML page, you do not need to include the … or … tags that you would use if creating an entire page.
-
Position:
This is how you specify where the popup will appear relative to the target. If, for example, you want your popup to appear to the top-right of the target, you might choose Popup x ‘left’, y ‘bottom’ at x ‘right’ y ‘top’.
You may optionally add x and/or y offset values, which should be specified in pixels. This will move the popup up or down, left or right: you may use negative values but do not include any text like ‘px’.
If you use an image as the target (using <img… /> markup for the title), be sure to specify the height and width either as attributes of the img tag or as style attributes because, without this, positioning behaviour will be (un)amusingly varied between different browsers.
- CSS class:
If you leave this blank, the popup will be basically styled, but if you want to provide your own styling, add all of the necessary attributes to one or your site stylesheets (we don’t recommend editing the popup’s own stylesheet directly in case future updates wipe out all your hard work!), and enter the class name in this box.
For example, if you want your popup to have a blue background, you may create a class in your stylesheet thus:
.blue-background {
background-color: #3333ff;
}
You could then turn this popup blue by entering ‘blue-background’ as the class.
- Submit the form when you have finished. Any entries that the plugin can’t accept (e.g. empty or duplicate tag, missing title, etc.) will be highlighted and you will be asked to correct those entries before submitting again.
USING SHORTCODES IN CONTENT
Having created a popup with its unique tag, you may add the shortcode referencing that tag to any content. When the content is viewed, the title will appear in its place and moving your mouse over, or clicking, it will show the popup.
For example, if you created a popup using the tag ‘firstpopup’ and the title ‘Information’, you would include it in your page using:
[infopopup:firstpopup]
When viewed, the word ‘Information’ would take the shortcode’s place.
Because the popup is created as a separate element from the target, you are free to include the target inside lists, tables, etc. without upsetting the document hierarchy.
If you misspell the tag when entering an InfoPopup shortcode, the tag will be displayed with question marks either side. For example, if you accidentally entered:
[infopopup:1stpopup]
Then you would see ‘?1stpopup?’ appear in its place.
STYLING THE SHORTCODE
By default, the title will appear in the same colour as the text surrounding it but will switch the mouse pointer to a pointing finger when it moves over it. If you want to change the colour, font style, mouse pointer or other attributes of the title, you can do so using the ‘infopopup-link’ class, which is automatically applied.
For example, to make the link text appear in bold blue text, add the following to your site stylesheet:
.infopopup-link {
font-weight: bold;
color: #3333ff;
}
LAST WORDS
- If you’re putting web pages together, you’ll know that just because it looks fantastic on your desktop monitor in your favourite browser, it may not look so hot on a smaller laptop screen or any one of the fine and varied selection of browsers that your audience call their favourite.
- The plugin was tested on several platforms and several browsers in several configurations, but that doesn’t mean we guarantee it’s going to be perfect first time for you. You are quite at liberty to view and alter (and possibly tidy!) the plugin code, and whilst we welcome reports of problems and requests for improvements, we cannot promise to attend to each such request immediately.
- The plugin makes use of jQuery Core and the jQuery UI plugin (v1.9.1). Eternal thanks to the jQuery team, without whom many web developers would have packed up and gone home a long time ago 😉
Screenshots
-
This is InfoPopup in action
-
This is the Admin Screen
