Documentation

Page Attributes - this is used for creating content for the tooltips

When you install the add-on, it adds page attributes that are immediately accessible from all your pages. All your tooltip content are created using page attributes because they are specific to an individual page. The 4 page attributes are stored in an attribute set called "Page List Tooltip Gallery" as below:

You can get to the Page Attributes by going to Page Properties and clicking the Custom Attributes tab. See the screenshots below:


Tooltip settings

Tooltip settings are set in a block. When you add a new block, you can apply settings for your tooltips. See the tooltip options below for hover and click:


Custom Template

The default template only displays thumbnails for the pages. The add-on comes with an additional template called PLTG Catalogue that displays gallery with thumbnails, title and a description.


Custom tooltip styling guide

If you want to create your own tooltip styles, enter a class name in the block's Tooltip Settings tab and copy and paste styles below in "css_common/jquery.qtip.css" file. Simply replace "myCustomClass" with your own "custom class name" that you entered in the Tooltip Settings and make appropriate changes to your stylesheet.

You can use the same tooltip style in multiple blocks. Just remember to enter the same custom class name when you create a block.
 
.qtip.myCustomClass {
    border-width: 4px;
    border-style: solid;
    border-color: #f1a031;

    background-color: #f1a031;
    color: #ccc;
}
.qtip.myCustomClass a { color:#ccc; }

.qtip.myCustomClass .qtip-titlebar {
    position: relative;
    padding: 5px 9px;
    overflow: hidden;
   
    border-bottom:1px solid #f1a031;
    font-weight: bold;
   
    background-color: #f1a031;
    color:#0e60b2;
}

.qtip.myCustomClass .qtip-titlebar a {

    text-decoration:none; color:#0e60b2;
}

.qtip.myCustomClass .qtip-content {
    position: relative;
    padding: 9px;
    overflow: hidden;

    text-align: left;
    word-wrap: break-word;
    background-color: #000;
}