Multiple, individual popups on any page each with their own unique shortcodes.
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:
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:
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.
For example, if you want your popup to have a blue background, you may create a class in your stylesheet thus:
You could then turn this popup blue by entering 'blue-background' as the class.
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:
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:
Then you would see '?1stpopup?' appear in its place.
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: