kirby-tooltip-plugin

Version 1.0

A plugin for the Kirby 2 CMS System to display tooltips via a kirbytext tag using the Tooltipster jQuery Plugin.

Installation

1. Copy the assets to your root folder or insert the single javascript and css files in your regarding assets folder.

2. Put the site/tags/tooltip.php file in your site/tags folder.

3. Include the CSS files in your header (in the default structure the site/snippets/header.php), before the </head> Tag but in any case also before your custom .css files.

    <?php echo css('assets/css/jquery.tooltipster.css') ?>
   

4. Include the Javascript files in your footer (in the default structure the site/snippets/footer.php), right before the </body> Tag.

    <?php echo js('assets/js/jquery.min.js'); ?>
    <?php echo js('assets/js/jquery.tooltipster.min.js'); ?>
   

Usage

You can use the tag inside of every kirbytext field.

(tooltip: Text to be shown within the tooltip. 
url: target if somebody clicks on the tooltip 
text: Text to be shown that activates the tooltip when hovered)

Which generates:

<a href="target if somebody clicks on the tooltip" class="tooltip tooltipstered">Text to be shown that activates the tooltip when hovered</a>

You can also use the tooltip without a link.

(tooltip: Text to be shown within the tooltip. 
text: Text to be shown that activates the tooltip when hovered)

Which generates:

<span href="" class="tooltip tooltipstered">Text to be shown that activates the tooltip when hovered</span>

Modification

Functionality

You can also modify the behaviour and styling of the tooltips by changing the original Plugin.

To modify the behaviour, take a look at the possible parameters and insert the following code below the Javascript Includes of the plugin in your footer right before the </body> tag.

For example, to set the maximum width of a tooltip to 400px:

// Tooltip Integration
$(document).ready(function() {
    if($('.tooltip').hasClass("tooltipstered")) {
    	$('.tooltip').tooltipster('destroy');
    }
    $('.tooltip').tooltipster({
        maxWidth : 400
    });
});

Styling

To modify the styling of the tooltip just add definitons for the classes .tooltipster-default and .tooltipster-content to your css or update the jquery.tooltipster.css file for example like the following:

.tooltipster-default {
  border-radius: 5px;
  border: 2px solid #5b5b5b;
  background: #0083a6;
  color: #fff;
}

.tooltipster-default .tooltipster-content {
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12pt;
  font-weight: 400;
  line-height: 1.3125em;
  padding: 8px 10px;
  overflow: hidden;
} 

Support & Contact

Acrontum GmbH is a web-development agency in munich, germany.

Please get back to us at anytime by using our website http://www.acrontum.de or support@acrontum.de.