Entries tagged html
Using Tippy Outside WordPress
December 17th, 2011
|
Tippy WordPress Plugin
|
0 Comments

Tippy has been written with WordPress in mind, but what if you want to use Tippy outside of WordPress – in a static HTML file, another CMS, or a custom project? In such situations, it will not be possible to use the Tippy short tags, but you can still use Tippy following the approach described in Using Tippy Without the Tags. To make it work, you will need to be sure and include any files needed by Tippy: jQuery, dom_tooltip.js, and dom_tooltip.factory.css.

I have put together an example: Tippy on a Static Page. Go there and view the page source to see how to set it up, or scroll around the code example below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
    <head>
        <title>Static Tippy Example</title>
       
        <link rel="stylesheet" href="http://croberts.me/wp-content/plugins/tippy/dom_tooltip.factory.css" type="text/css" />
       
        <script src="http://croberts.me/wp-content/themes/croberts/js/jquery-1.6.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://croberts.me/wp-content/plugins/tippy/dom_tooltip.js"></script>

        <script type="text/javascript">
            Tippy.tipPosition = "link";
            Tippy.tipOffsetX = 0;
            Tippy.tipOffsetY = 10;
            Tippy.fadeRate = 300;
            Tippy.sticky = false;
            Tippy.showClose = true;
        </script>
    </head>
   
    <body style="background-color: #ddd;">
        <div style="width: 700px; margin: 0 auto; background-color: white; border: 1px dashed #333; padding: 20px;">
            The purpose of this page is to show how you can use Tippy in a regular HTML file (or any other type of page) without having to go through WordPress. View the source of this page and note the files that must be included: dom_tooltip.factoy.css; jQuery; dom_tooltip.js. Also note the settings that must be initialized in the script section.<br /><br />
            Here is a <a class="tippy_link" tippyTitle="Tippy Link" id="mydiv" onmouseover="Tippy.loadTipInfo('Easy peasy.', 0, 0, 'mydiv', event);" onmouseout="Tippy.fadeTippyOut();">Tippy Link</a> set up in a standard HTML page.<br /><br />
           
            Below, see Tippy applied on an image:<br /><br />
           
            <a id="tippy_tipSample0" class="tippy_link" title="Tippy with an image" onmouseover="Tippy.loadTipInfo('You can put anything in your Tippy tooltips. Just be aware that things like &quot; will have to be converted to html entities. View source and look for this line for an example.<br /><br /><img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/NGC_4414_%28NASA-med%29.jpg/291px-NGC_4414_%28NASA-med%29.jpg&quot; />', 0, 0, 'tippy_tipSample0', event);" onmouseout="Tippy.fadeTippyOut();"><img style="height: 200px;" src="http://croberts.me/wp-content/uploads/2011/05/giraffe.jpg" /></a>
        </div>
    </body>
</html>