You are here: Home > Tooltip and Modalbox


Tooltip and Modal Box

Tooltip and Modal Box adds a usability of tooltips to CMSimple pages and templates. Simply make a link to # with a title attribute containing any text and you are done. It is the most simple way of using Tooltip and Modal Box plugin but it can much more so continue reading.


  • Tooltips and modal boxes showing infformation from title attributes of links
  • Tooltips and modal boxes showing content of not hidden CMSimple pages
  • Autoload of modal boxes
  • Optional set and forget for tooltips.
  • Available from CMSimple pages and templates
  • On the fly reconfiguration of plugin settings
  • Does not require use of cookies.

Table of Content

  1. Licens and purchase
  2. Installation
  3. Configuration
  4. Compatibility
  5. History
  6. Known problems
  7. Future development
  8. Acknowledgement
  9. Disclaimer

1. License and purchase

#license# #rl_license#
Remove Link License:





2. Installation

Tooltip and Modal Box plugin requires a preinstalled pluginloader and jquery plugin (both included in CMSimple_XH core distribution package version 1.4.1 and higher).

Download and uncompress the fil tooltip.zip Upload the entire tooltip folders to  your "plugins" folder. 


3. Configuration

To access Tooltip classes change tinymce configuration by selecting simplesolutions as your default "Init" configuration in tinymce4 configuration. 

Set and forget method to create tooltips:

Change your configuration of "set and  forget" to true and each link with the completed title attribute is turned into a tooltip. Read description below how to create a tooltip in an editor.This method can cause conflicts with other plugins that also use the title attribute, among them Gallery Collection.

The easy way of create tooltips and modalboxes

Edit the file stylesheet.css in selected template and add 2 lines:

it will make this two classes available on class lists in dialog boxes


In editor (tinymce or other)  create a link and in Insert/Edit Link dialog boks enter:

  • # in field Link URL 
  • write tooltip text in Title filed.
  • select tooltip or modal in Class dropdown list (skip this step for set and forget method). NB! CMSimple XH v.1.7 has no class option, to add it follow instructions on Tinymce 4 add-ons

Save your work and a tooltip is created. You can style tooltip and modal classes.

Using the content of CMSimple page as modal box or tooltip

To create a tooltip showing the content of a CMSimple page insert a command: {{{tooltip("link content","link text","link id");}} } on a page where you want  to add a tooltip. 

To create a modal box just insert { {{PLUGIN: modal_tooltip(
"link content","link text","link id");}}} on a page where you want  to add a tooltip.

If "link text" is empty then the "link content" will be used as a link title. Only published pages may be used as a toolbox content.

If you use a page title to create the link content then the title should be unique, otherwise the first occurence of the title is used. Link id is optional and may be omitted or null. 

Running Tooltip and Modal Box from template

In head sectionof the file template.htm insert following


  modal_tooltip('CMSimple Page Name',null,'MyUniqueID');


In body section insert

<a href="#" id="MyUniqueID">Some text</a>

A link to "Privacy Statement" ont this site is made this way.


An optional mode of use of Tooltip and Modal Box plugn is to show a modal box on page load, ie. before page content is visble. For exempel please visit page Autoload. To create an autoload insert { {{PLUGIN: autoload_tooltip("page name, title);}}} on your page.  Autoload has no visible output.

On the fly reconfiguration

On the fly reconfiguration is removed in CMSimple XH 1.7

Tooltip and Modal box is highly configurable and a number of options like colors, width, borders, show and hide effects can be changed. For further assistance use help in plugins configuration section.


Modal Box  with Image Album 

link to a website page white_tooltip with an image.

Tooltip can be used with HTML

4. Compatibility

Tested in CMSimple_XH ver. 1.7.1 

5. History 

version 2

On the fly change of configuration settings has been removed from CMSimple XH version 1.7, as this version no longer supports the ability to overwrite configuration variables

Version 1.0.0 Marts 2013

6. Known problems

To avoid conflicts with some other plugins using jQuery UI, it is recommended to change the configuration of the jQuery plugin to autoload of both jQuery and jQueryUI.

The easy way of create tooltips and modalboxes doesn't work with vcontent

7. Future development

Autoload of modal boxes and files as input. 

8. Acknowledgement

Tooltip and Modal box plugin is based on jQuery plugin qTip2.by Craig Thompson.

9. Disclaimer

This CMSimple plugin is distributed in the hope that it will be useful - without any warranty; without even the implied warranty of fitnes for a particualr purpose.

© simpleSolutions 2013-2018

This page is powered by
CMSimple plugin: Tooltip and Modalbox © simpleSolutions



All plugins on this site are validated according to CMSimple_XH standard 





Newsbox Rotator demo


Hold the cursor over Newsbox Rotator area to pause rotation.Move the mouse outside area to continue rotation.

In CMSimple XH not published news are not visible in News Rotator. 



Newsbox Rotator demo

Newsbox Rotator Test 1

Newsbox_1 test test test


test1 test2 test3 test4 test5 test6 test7 test8 test9 

Newsbox Rotator demo

CMSimple plugin: Newsbox Rotator
© simpleSolutions
dow Meeting weekly event

Last update:

Powered by CMSimple | Template by simpleSolutions

(X)html | css | Login