You are here: Home > Tooltip and Modal Box

Dansk

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.

Options:

  • 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

Tooltip and Modal Box  is released under Linkware and Commercial.license. Websites used for sale and advertising (incl. Google Adwords etc.) or other commercial activity as well as websites developed against a payment are considered as commercial and requires a Commercial License. 

You are allowed to make code changes in this plugin to tailor it to your needs.This plugin is for personal use and you may not redistribute either original or modified code. Please read and accept License Conditions

Price 40,00 €

 To order the Tooltip and Modal Box please fill the form with your e-mail and the adress of the website where you will use this plugin.


Linkware license is not available.

Powered by Form Mailer plugin

Script by Dagon Design. CMSimple customization by simpleSolutions

An Linkware/Test version of Tooltip and Modal Box plugin is available through the button below.  By downloading this plugin you agree licensing terms for Linkware plugins.

 

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 folder to  your "plugins" folder. 

3. 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

tooltip.jpg

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)

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: { {{PLUGIN: tooltip("link content","link text","link id");}}} somwhere on the page. 

To create a modal box just insert { {{PLUGIN: modal_tooltip(
"link content","link text","link id");}}} somewhere on the page.

 

If "link text" is empty then the "link content" will be used as a link title. Only published pages will 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

<?php

  include_once($pth['folder']['plugins'].'jquery/jquery.inc.php');
  include_jQuery();
  tooltip_config("modal_style","qtip-green"); // change style
  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.

Autoload

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

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.

Tooltips and modal boxes created by call to { {{PLUGIN...}}} can be reconfigured by call to a function tooltip_config(configuration_string, value) prior to call to the plugin e.g.:

{ {{PLUGIN: tooltip_config('modal_style','qtip-youtube');}}}
{ {{PLUGIN: modal_tooltip("Dark modal box",'modalId_dark','Modal box');}}} 

Click on an example: Dark modal box with Image Album and white_tooltip with an image.

You have to use { {{PLUGIN: .... }}} notation to get it working.

4. Compatibility

Tested in CMSimple_XH ver. 1.5.6 with jQuery 1.8.3.
Use with jQuery 1.9.x requires use of appropriate jQuery Migrate addon.

5. History 

Version 1.0.0 Marts 2013

6. Known problems

Use with jQuery 1.9.x requires use of appropriate jQuery Migrate addon. 

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.

Submenu



  |   top   |  

 

 

All plugins on this site are validated according to CMSimple_XH standard

 

 

 


Newsbox Rotator demo

Hints

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
v.2 © simpleSolutions

Last update:
March 04, 2017, 13:02

Powered by CMSimple | Template by simpleSolutions

(X)html | css | Login