Book Image

concrete5 Beginner's Guide

Book Image

concrete5 Beginner's Guide

Overview of this book

Table of Contents (19 chapters)
concrete5
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Time for action – creating advanced tooltips


Create a TipTip tooltip by the following steps:

  1. Create a new directory structure for our template: /blocks/content/templates/tip_tip.

  2. Create a new file called view.php in it. We're going to use the previously described technique again which allows us to extend the existing core template:

    <div class="content-tip-tip">
      <?php 
      $bvt = new BlockViewTemplate($b); 
      $bvt->setBlockCustomTemplate(false);
    
      include($bvt->getTemplate());
      ?>
    </div>
  3. Download the TipTip source code from the following location: http://code.drewwilson.com/entry/tiptip-jquery-plugin.

  4. Extract the CSS file into a new folder called css within our template folder. Extract jquery.tipTip.minified.js into a new directory called js.

  5. We've added all but one file we need. The last file, called view.js, is going to initialize the advanced tooltips:

    $(function(){
        $(".content-tip-tip [title]").tipTip();
    });
  6. Go to the page where you want the new tooltip to appear...