The essential news about content management systems and mobile technology.
Powered by Joocial, XT Search for Algolia, and SlimApps.

logo

Do you use Tooltips or Popovers? Would you like to make it easy to insert them when editing an article - even after you've got the text all done? Is it a hassle remembering the syntax? Do you want complete control over the style and placement of your tips and pops? Then Tip-Pop button is here to help you.

An editor extension button that works with both TinyMCE and JCE and allows you to simply highlight the content you want to have trigger a tooltip or popover, press the button and enter the text for the tooltip (or title and text for a popover). You can also set the placement (where it will popup), the trigger action (when you hover, click or focus on the content), and optionally classes to style both the tip or pop itself and the content that triggers it (it is good to give your readers a consistent visual clue as to where tooltips and popovers are located).

This doesn't require any content plugin, the html to create a tooltip is inserted directly into the editor so it should work with most extensions. Simple html can be included in the text (subject to editor restrictions). The downside is that to see or edit the popup text after inserting it at the moment you have to switch to code view.

You do need to be sure that your template is loading bootstrap (most are these days) and also add two lines to your template index.php file to load an included javascript file to tell bootstrap what class names to use as selectors to trigger tooltips and popovers.

You probably also want to add styles for both tooltip and popover - the bootstrap defaults are white text on a black background for tooltips and dark text on a grey background for popovers - better to have something that matches your site. A sample stylesheet is included which you can either load in index.php or use to adapt your own custom stylesheet. Full details of how to do this and how to set the selector classes are on the documentation page for the TipPop plugin.

Read more