Changeset 734919

Timestamp:

07/02/2013 03:59:16 AM (12 years ago)

Author:

Columcille

Message:

Tagging 5.2.0 with various new options and attributes related to positioning

Location:

tippy

Files:

• tags/5.2.0 (copied) (copied from tippy/trunk)
• tags/5.2.0/readme.txt (copied) (copied from tippy/trunk/readme.txt) (2 diffs)
• tags/5.2.0/tippy.css (copied) (copied from tippy/trunk/tippy.css)
• tags/5.2.0/tippy.js (copied) (copied from tippy/trunk/tippy.js) (8 diffs)
• tags/5.2.0/tippy.php (copied) (copied from tippy/trunk/tippy.php) (15 diffs)
• tags/5.2.0/tippy_admin.php (copied) (copied from tippy/trunk/tippy_admin.php) (13 diffs)
• trunk/readme.txt (modified) (2 diffs)
• trunk/tippy.js (modified) (8 diffs)
• trunk/tippy.php (modified) (15 diffs)
• trunk/tippy_admin.php (modified) (13 diffs)

tippy/tags/5.2.0/readme.txt

@@ -5 +5 @@
 Requires at least: 2.5
 Tested up to: 3.5.1
-Stable tag: 5.1.2
+Stable tag: 5.2.0
 
 Allows users to turn text into a tooltip or popup using a special [tippy] tag.
@@ -30 +30 @@
 == Changelog ==
 
+= 5.2.0 =
+* Added new position options for absolute and fixed position.
+* Per-tooltip position attribute. Values: link, mouse, absolute, or fixed
+* Added new container option to specify a css selector which should be the parent of the tooltip
+* Per-tooltip container attribute, same purpose as new container option
+* Per-tooltip method attribute; specify embed or append to determine how content is added to the tooltip. Embed is the traditional way; append uses the new experimental (yet soon to be default) method.
+
 = 5.1.2 =
-= Additional tweaks for the experimental method
+* Additional tweaks for the experimental method
 
 = 5.1.1 =

tippy/tags/5.2.0/tippy.js

@@ -47 +47 @@
     this.tipOffsetX = 0;
     this.tipOffsetY = 0;
+    this.tipContainer = "body";
     
     // Do we fade in and out?
@@ -76 +77 @@
     {
         this.tipPosition = tipArgs.tipPosition;
+        this.tipContainer = tipArgs.tipContainer;
         this.tipOffsetX = tipArgs.tipOffsetX;
         this.tipOffsetY = tipArgs.tipOffsetY;
@@ -94 +96 @@
             .hide()
             .css("display", "none")
-            .css("position", "absolute")
             .css("height", "auto")
             .addClass("domTip_Tip tippy_tip")
@@ -101 +102 @@
             .appendTo('body');
 
+        if (this.tipPosition === "fixed") {
+            this.tipBox.css('position', 'fixed');
+        } else {
+            this.tipBox.css('position', 'absolute');
+        }
+
         this.tipHeader = this.jQuery("<div></div>")
             .css("height", "auto")
@@ -121 +128 @@
                 this.tipBox.addClass("tippy_draggable");
             }
+        }
+
+        if (this.tipContainer) {
+            var moveTip = this.tipBox.detach();
+            this.jQuery(this.tipContainer).append(moveTip);
         }
     };
@@ -211 +223 @@
         
         var tipHorSide = "left", tipVertSide = "top";
-        
+        this.tipXloc = 0;
+        this.tipYloc = 0;
+
         // this.tipXloc and this.tipYloc specify where the tooltip should appear.
         // By default, it is just below and to the right of the mouse pointer.
-        if (this.tipPosition === "mouse") {
+        if (this.manPosition === "absolute") {
+            this.tipBox.css('position', 'absolute');
+        } else if (this.manPosition === "fixed") {
+            this.tipBox.css('position', 'fixed');
+        } else if (this.manPosition === "mouse" || (this.tipPosition === "mouse" && this.manPosition !== "link")) {
             // Position below the mouse cursor
             this.tipXloc = this.curPageX;
             this.tipYloc = this.curPageY;
-        } else if (this.tipPosition === "link") {
+        } else if (this.manPosition === "link" || this.tipPosition === "link") {
             // Position below the link
             this.tipXloc = this.tipLinkX;
@@ -372 +390 @@
             } else {
                 this.manOffsetY = undefined;
+            }
+
+            if (tipArgs.position !== undefined) {
+                this.manPosition = tipArgs.position;
+            } else {
+                this.manPosition = undefined;
             }
             
@@ -445 +469 @@
                 domTip_headerLink = this.jQuery("#" + this.tipId).attr('href');
             }
+
+            if (tipArgs.container !== undefined) {
+                this.newContainer = tipArgs.container;
+
+                var moveTip = this.tipBox.detach();
+                this.jQuery(tipArgs.container).append(moveTip);
+            } else {
+                if (this.newContainer !== undefined) {
+                    var moveTip = this.tipBox.detach();
+                    this.jQuery(this.tipContainer).append(moveTip);
+
+                    this.newContainer = undefined;
+                }
+            }
             
             this.populateTip(this.contentText, domTip_headerText, domTip_headerLink);       

tippy/tags/5.2.0/tippy.php

@@ -4 +4 @@
 Plugin URI: http://croberts.me/tippy/
 Description: Simple plugin to display tooltips within your WordPress blog.
-Version: 5.1.2
+Version: 5.2.0
 Author: Chris Roberts
 Author URI: http://croberts.me/
@@ -33 +33 @@
     private $tipOffsetX = 0;
     private $tipOffsetY = 10;
+    private $tipOffsetXUnit = 'px';
+    private $tipOffsetYUnit = 'px';
+    private $tipContainer = false;
     private $linkWindow = 'same';
     private $sticky = 'false';
@@ -143 +146 @@
                               'tipOffsetX' => $this->tipOffsetX,
                               'tipOffsetY' => $this->tipOffsetY,
+                              // 'tipOffsetXUnit' => $this->tipOffsetXUnit,
+                              // 'tipOffsetYUnit' => $this->tipOffsetYUnit,
+                              'tipContainer' => $this->tipContainer,
                               'linkWindow' => $this->linkWindow,
                               'sticky' => $this->sticky,
@@ -223 +229 @@
 
         $useDivContent = ($this->getOption('useDivContent') === true) ? "true" : "false";
+        $setContainer = ($this->getOption('tipContainer') === "") ? "false" : '"'. $this->getOption('tipContainer') .'"';
         
         echo '
@@ -228 +235 @@
                 Tippy.initialize({
                     tipPosition: "'. $this->getOption("tipPosition") .'",
+                    tipContainer: '. $setContainer .',
                     tipOffsetX: '. $this->getOption("tipOffsetX") .',
                     tipOffsetY: '. $this->getOption("tipOffsetY") .',
@@ -278 +286 @@
             $this->tipOffsetX = intval($_POST['tipOffsetX']);
             $this->tipOffsetY = intval($_POST['tipOffsetY']);
+            // $this->tipOffsetX = sanitize_text_field($_POST['tipOffsetXUnit']);
+            // $this->tipOffsetY = sanitize_text_field($_POST['tipOffsetYUnit']);
+            $this->tipContainer = isset($_POST['tipContainer']) ? sanitize_text_field($_POST['tipContainer']) : false;
             $this->linkWindow = sanitize_text_field($_POST['linkWindow']);
             $this->sticky = sanitize_text_field($_POST['sticky']);
@@ -322 +333 @@
                                           'offsetx' => false,
                                           'offsety' => false,
+                                          'position' => false,
+                                          'method' => false,
+                                          'container' => false,
                                           'img' => false), $attributes);
         
@@ -355 +369 @@
                           'offsetx' => $tippyAtts['offsetx'],
                           'offsety' => $tippyAtts['offsety'],
+                          'position' => $tippyAtts['position'],
+                          'method' => $tippyAtts['method'],
+                          'container' => $tippyAtts['container'],
                           'img' => $tippyAtts['img']);
         
@@ -407 +424 @@
      * 'bottom' => Optional int; specifies bottom position in pixels.
      * 'right' => Optional int; specifies right position in pixels.
-     * 'useDiv' => Optional bool; should we use the new method of inserting content?
+     * 'position' => Optional string; specify position (link|mouse|absolute|fixed)
+     * 'method' => Option string; specify method to load content (embed|append)
+     * 'useDiv' => Optional bool; should we use the new method of inserting content? (deprecated)
+     * 'container' => Optional string; css selector which specifies which element should be the parent of the tooltip
      * ];
     */
@@ -442 +462 @@
         $tippyOffsetX = isset($tippyArray['offsetx']) ? $tippyArray['offsetx'] : false;
         $tippyOffsetY = isset($tippyArray['offsety']) ? $tippyArray['offsety'] : false;
+        $tippyPosition = isset($tippyArray['position']) ? $tippyArray['position'] : false;
+        $tippyMethod = isset($tippyArray['method']) ? $tippyArray['method'] : false;
+        $tippyContainer = isset($tippyArray['container']) ? $tippyArray['container'] : false;
         $tippyImg = isset($tippyArray['img']) ? $tippyArray['img'] : false;
         $tippyUseDiv = isset($tippyArray['useDiv']) ? $tippyArray['useDiv'] : false;
@@ -479 +502 @@
 
             // See if we are using the experimental content method
-            if ($this->getOption('useDivContent') === 'true' || $tippyUseDiv === true) {
+            if (($this->getOption('useDivContent') === 'true' || $tippyUseDiv === true) && (!$tippyMethod || $tippyMethod === "append")) {
                 $this->addContent($tippyTitle, $tippyText, $tippyId);
             } else {
@@ -557 +580 @@
                 $this->addTippyObjectValue("offsety", (int)$tippyOffsetY, "%d");
             }
+
+            if ($tippyPosition !== false) {
+                $this->addTippyObjectValue("position", $tippyPosition, "'%s'");
+            }
+
+            if ($tippyContainer !== false) {
+                $this->addTippyObjectValue("container", $tippyContainer, "'%s'");
+            }
             
             // Check class/id
@@ -565 +596 @@
 
             if (!empty($tippyName)) {
-                $tippyLinkName = sprintf('name="%s"', $tippyName);
+                $tippyLinkName = 'name="'. $tippyName .'" ';
             }
             
@@ -573 +604 @@
             }
             
-            $returnText = sprintf('<a %s id="%s" class="%s" %s %s %s %s="Tippy.loadTip({ %s, event: event });" %s>%s</a>', $tippyLinkName, $tippyId, $tippyLinkClass, $tippyHref, $tippyTarget, $tippyTitleAttribute, $activateTippy, $this->tippyObject, $tippyMouseOut, $tippyLinkText);
+            $returnText = sprintf('<a '. $tippyLinkName .' id="%s" class="%s" %s %s %s %s="Tippy.loadTip({ %s, event: event });" %s>%s</a>', $tippyId, $tippyLinkClass, $tippyHref, $tippyTarget, $tippyTitleAttribute, $activateTippy, $this->tippyObject, $tippyMouseOut, $tippyLinkText);
 
             // Clear the object
@@ -589 +620 @@
 
         if (!empty($valueType)) {
-            $this->tippyObject .= sprintf($valueName .": ". $valueType, $valueSetting);
+            $this->tippyObject .= sprintf($valueName .": $valueType", $valueSetting);
         } else {
             $this->tippyObject .= $valueName .": ". $valueSetting;

tippy/tags/5.2.0/tippy_admin.php

@@ -29 +29 @@
 
         <div class="tippyOptionSection">
-            <div class="tippyHeader"><span>Tooltip Trigger</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Do you want the tooltip to automatically appear when a visitor hovers over the Tippy link, or should they have to click the link first?[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Tooltip Trigger</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Do you want the tooltip to automatically appear when a visitor hovers over the Tippy link, or should they have to click the link first?[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_openTip_hover" name="openTip"  type="radio" value="hover" <?php if ($tippy->getOption('openTip') == "hover") echo "checked" ?> />
@@ -42 +42 @@
             </div>
 
-            <div class="tippyHeader"><span>Show/Hide</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Should the tooltip use a fade in/fade out effect, or should it display and hide with no fade effect?[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Show/Hide</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Should the tooltip use a fade in/fade out effect, or should it display and hide with no fade effect?[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_fadeTip_fade" name="fadeTip"  type="radio" value="fade" <?php if ($tippy->getOption('fadeTip') == "fade") echo "checked" ?> />
@@ -55 +55 @@
             </div>
 
-            <div class="tippyHeader"><span>Fade time</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]If you want to display a fade effect, how long should the fade effect last? A higher value means the tooltip will take longer to fade in/out.[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Fade time</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]If you want to display a fade effect, how long should the fade effect last? A higher value means the tooltip will take longer to fade in/out.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <label for="tippy_faderate">
@@ -63 +63 @@
             </div>
 
-            <div class="tippyHeader"><span>Close method</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Should the tooltip automatically disappear when the visitor mouses away, or should visitors have to manually close the tooltip? (Note, you will need to be sure to specify "Show close links" if you set this to remain sticky.)[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Close method</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Should the tooltip automatically disappear when the visitor mouses away, or should visitors have to manually close the tooltip? (Note, you will need to be sure to specify "Show close links" if you set this to remain sticky.)[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_sticky_auto" name="sticky" type="radio" value="false" <?php if ($tippy->getOption('sticky') == "false") echo "checked" ?> />
@@ -76 +76 @@
             </div>
 
-            <div class="tippyHeader"><span>Disappear Delay</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]If you selected for the tooltip to automatically close, how long should it wait before closing? This allows users to mouse away briefly without the tooltip closing right away. Set to 0 if you want it to immediately close.[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Disappear Delay</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]If you selected for the tooltip to automatically close, how long should it wait before closing? This allows users to mouse away briefly without the tooltip closing right away. Set to 0 if you want it to immediately close.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <label for="tippy_delay">
@@ -84 +84 @@
             </div>
 
-            <div class="tippyHeader"><span>Close Link</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Do you want to display a Close link so visitors can manually close the tooltip? If so, what should the Close link say?[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Close Link</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Do you want to display a Close link so visitors can manually close the tooltip? If so, what should the Close link say?[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_showClose" name="showClose" type="checkbox" value="true" <?php if ($tippy->getOption('showClose') == 'true') echo "checked" ?> /> 
@@ -99 +99 @@
 
         <div class="tippyOptionSection">        
-            <div class="tippyHeader"><span>Link Target</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]If you specify a url for your Tippy or Header link, should the url open in a new window or the same window?[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Link Target</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]If you specify a url for your Tippy or Header link, should the url open in a new window or the same window?[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_linkWindow_same" name="linkWindow" type="radio" value="same" <?php if ($tippy->getOption('linkWindow') == "same") echo "checked" ?> />
@@ -112 +112 @@
             </div>
             
-            <div class="tippyHeader"><span>Tooltip Location</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Do you want the tooltip to appear relative to the Tippy link or relative to the mouse pointer?[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Tooltip Location</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Decide where you want the tooltip to appear. If you specify absolute or fixed, you need to set the x/y offset below or set the offset per-tooltip.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_tipPosition_link" name="tipPosition" type="radio" value="link" <?php if ($tippy->getOption('tipPosition') == "link") echo "checked" ?> />
@@ -122 +122 @@
                     <label for="tippy_tipPosition_mouse">
                         Tooltip positioned under the mouse pointer
-                    </label>
+                    </label><br />
+
+                <input id="tippy_tipPosition_container" name="tipPosition"  type="radio" value="absolute" <?php if ($tippy->getOption('tipPosition') == "absolute") echo "checked" ?> />
+                    <label for="tippy_tipPosition_container">
+                        Tooltip absolute positioned to the containing element.
+                    </label><br />
+
+                <input id="tippy_tipPosition_fixed" name="tipPosition"  type="radio" value="fixed" <?php if ($tippy->getOption('tipPosition') == "fixed") echo "checked" ?> />
+                    <label for="tippy_tipPosition_fixed">
+                        Tooltip in a fixed position.
+                    </label>
+            </div>
+
+            <div class="tippyHeader"><span>Tooltip Container</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]By default, Tippy is located as a child of the body element. If you put a CSS selector here, Tippy will be moved inside that element. Might be useful if you switch position to absolute and set the new container to position: relative since Tippy\'s position will be determined by that element.[/tippy]'); ?>)</div>
+            <div class="tippyOptions">
+                <div style="display: inline-block; width: 100px;">
+                    <label for="tippy_tipContainer">
+                        Tippy container: 
+                    </label>
+                </div>
+                <input id="tippy_tipContainer" name="tipContainer" size="10" type="text" value="<?php echo $tippy->getOption('tipContainer'); ?>" /> Leave empty for default
             </div>
             
-            <div class="tippyHeader"><span>Tooltip Offset</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Specify X/Y offsets if you want to nudge the tooltip around - make it display farther away from its trigger position. Give it negative values to move it up or left, positive values for right or down.[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Tooltip Offset</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Specify X/Y offsets if you want to nudge the tooltip around - make it display farther away from its trigger position. Give it negative values to move it up or left, positive values for right or down.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <div style="display: inline-block; width: 100px;">
@@ -132 +152 @@
                     </label>
                 </div>
-                <input id="tippy_tipOffsetX" name="tipOffsetX" size="3" type="text" value="<?php echo $tippy->getOption('tipOffsetX'); ?>" />px<br />
+                <input id="tippy_tipOffsetX" name="tipOffsetX" size="3" type="text" value="<?php echo $tippy->getOption('tipOffsetX'); ?>" /> px
+                <?php /* Possibility later on
+                <select name="tipOffsetXUnit">
+                    <option value="px" <?php if ($tippy->getOption('tipOffsetXUnit') == "px") { echo 'checked="checked"'; } ?>>px</option>
+                    <option value="em" <?php if ($tippy->getOption('tipOffsetXUnit') == "em") { echo 'checked="checked"'; } ?>>em</option>
+                    <option value="pct" <?php if ($tippy->getOption('tipOffsetXUnit') == "pct") { echo 'checked="checked"'; } ?>>pct</option>
+                </select>
+                */ ?>
+                <br />
                 
                 <div style="display: inline-block; width: 100px;">
@@ -139 +167 @@
                     </label>
                 </div>
-                <input id="tippy_tipOffsetY" name="tipOffsetY" size="3" type="text" value="<?php echo $tippy->getOption('tipOffsetY'); ?>" />px
+                <input id="tippy_tipOffsetY" name="tipOffsetY" size="3" type="text" value="<?php echo $tippy->getOption('tipOffsetY'); ?>" /> px
+                <?php /* Possibility later on
+                <select name="tipOffsetYUnit">
+                    <option value="px" <?php if ($tippy->getOption('tipOffsetYUnit') == "px") { echo 'checked="checked"'; } ?>>px</option>
+                    <option value="em" <?php if ($tippy->getOption('tipOffsetYUnit') == "em") { echo 'checked="checked"'; } ?>>em</option>
+                    <option value="pct" <?php if ($tippy->getOption('tipOffsetYUnit') == "pct") { echo 'checked="checked"'; } ?>>pct</option>
+                </select>
+                */ ?>
                 
             </div>
             
-            <div class="tippyHeader"><span>Title Attribute</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]For SEO and Accessibility best practices, it is best to add a title attribute to link elements. Most browsers display the title as a miniature tooltip (for instance, a small yellow box under the pointer). This can get in the way of Tippy. Specify whether or not you want to include a title in your Tippy links.[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Title Attribute</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]For SEO and Accessibility best practices, it is best to add a title attribute to link elements. Most browsers display the title as a miniature tooltip (for instance, a small yellow box under the pointer). This can get in the way of Tippy. Specify whether or not you want to include a title in your Tippy links.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_showTitle" name="showTitle" type="checkbox" value="true" <?php if ($tippy->getOption('showTitle') == "true") echo "checked" ?> /> 
@@ -151 +186 @@
             </div>
 
-            <div class="tippyHeader"><span>Draggable Tooltips</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Uses jQuery UI. Allow users to drag tooltips around. Specify whether dragging should work from the header only or from any part of the tooltip.<br /><br />For best results, set the tooltip to sticky and limit dragging to the header.[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Draggable Tooltips</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Uses jQuery UI. Allow users to drag tooltips around. Specify whether dragging should work from the header only or from any part of the tooltip.<br /><br />For best results, set the tooltip to sticky and limit dragging to the header.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_dragTips" name="dragTips" type="checkbox" value="true" <?php if ($tippy->getOption('dragTips') == "true") echo "checked" ?> /> 
@@ -164 +199 @@
             </div>
 
-            <div class="tippyHeader"><span>Experimental</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Provides a much better method of adding your content to a Tippy tooltip. The new approach should permit a greater range of content to go inside a tooltip. If you have trouble getting certain content to display, turn this on and see if it works. Please report success or problems to <a href="mailto:[email protected]">Chris Roberts</a>.[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Experimental</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Provides a much better method of adding your content to a Tippy tooltip. The new approach should permit a greater range of content to go inside a tooltip. If you have trouble getting certain content to display, turn this on and see if it works. Please report success or problems to <a href="mailto:[email protected]">Chris Roberts</a>.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_useDivContent" name="useDivContent" type="checkbox" value="true" <?php if ($tippy->getOption('useDivContent') === "true") echo "checked" ?> /> 

tippy/trunk/readme.txt

@@ -5 +5 @@
 Requires at least: 2.5
 Tested up to: 3.5.1
-Stable tag: 5.1.2
+Stable tag: 5.2.0
 
 Allows users to turn text into a tooltip or popup using a special [tippy] tag.
@@ -30 +30 @@
 == Changelog ==
 
+= 5.2.0 =
+* Added new position options for absolute and fixed position.
+* Per-tooltip position attribute. Values: link, mouse, absolute, or fixed
+* Added new container option to specify a css selector which should be the parent of the tooltip
+* Per-tooltip container attribute, same purpose as new container option
+* Per-tooltip method attribute; specify embed or append to determine how content is added to the tooltip. Embed is the traditional way; append uses the new experimental (yet soon to be default) method.
+
 = 5.1.2 =
-= Additional tweaks for the experimental method
+* Additional tweaks for the experimental method
 
 = 5.1.1 =

tippy/trunk/tippy.js

@@ -47 +47 @@
     this.tipOffsetX = 0;
     this.tipOffsetY = 0;
+    this.tipContainer = "body";
     
     // Do we fade in and out?
@@ -76 +77 @@
     {
         this.tipPosition = tipArgs.tipPosition;
+        this.tipContainer = tipArgs.tipContainer;
         this.tipOffsetX = tipArgs.tipOffsetX;
         this.tipOffsetY = tipArgs.tipOffsetY;
@@ -94 +96 @@
             .hide()
             .css("display", "none")
-            .css("position", "absolute")
             .css("height", "auto")
             .addClass("domTip_Tip tippy_tip")
@@ -101 +102 @@
             .appendTo('body');
 
+        if (this.tipPosition === "fixed") {
+            this.tipBox.css('position', 'fixed');
+        } else {
+            this.tipBox.css('position', 'absolute');
+        }
+
         this.tipHeader = this.jQuery("<div></div>")
             .css("height", "auto")
@@ -121 +128 @@
                 this.tipBox.addClass("tippy_draggable");
             }
+        }
+
+        if (this.tipContainer) {
+            var moveTip = this.tipBox.detach();
+            this.jQuery(this.tipContainer).append(moveTip);
         }
     };
@@ -211 +223 @@
         
         var tipHorSide = "left", tipVertSide = "top";
-        
+        this.tipXloc = 0;
+        this.tipYloc = 0;
+
         // this.tipXloc and this.tipYloc specify where the tooltip should appear.
         // By default, it is just below and to the right of the mouse pointer.
-        if (this.tipPosition === "mouse") {
+        if (this.manPosition === "absolute") {
+            this.tipBox.css('position', 'absolute');
+        } else if (this.manPosition === "fixed") {
+            this.tipBox.css('position', 'fixed');
+        } else if (this.manPosition === "mouse" || (this.tipPosition === "mouse" && this.manPosition !== "link")) {
             // Position below the mouse cursor
             this.tipXloc = this.curPageX;
             this.tipYloc = this.curPageY;
-        } else if (this.tipPosition === "link") {
+        } else if (this.manPosition === "link" || this.tipPosition === "link") {
             // Position below the link
             this.tipXloc = this.tipLinkX;
@@ -372 +390 @@
             } else {
                 this.manOffsetY = undefined;
+            }
+
+            if (tipArgs.position !== undefined) {
+                this.manPosition = tipArgs.position;
+            } else {
+                this.manPosition = undefined;
             }
             
@@ -445 +469 @@
                 domTip_headerLink = this.jQuery("#" + this.tipId).attr('href');
             }
+
+            if (tipArgs.container !== undefined) {
+                this.newContainer = tipArgs.container;
+
+                var moveTip = this.tipBox.detach();
+                this.jQuery(tipArgs.container).append(moveTip);
+            } else {
+                if (this.newContainer !== undefined) {
+                    var moveTip = this.tipBox.detach();
+                    this.jQuery(this.tipContainer).append(moveTip);
+
+                    this.newContainer = undefined;
+                }
+            }
             
             this.populateTip(this.contentText, domTip_headerText, domTip_headerLink);       

tippy/trunk/tippy.php

@@ -4 +4 @@
 Plugin URI: http://croberts.me/tippy/
 Description: Simple plugin to display tooltips within your WordPress blog.
-Version: 5.1.2
+Version: 5.2.0
 Author: Chris Roberts
 Author URI: http://croberts.me/
@@ -33 +33 @@
     private $tipOffsetX = 0;
     private $tipOffsetY = 10;
+    private $tipOffsetXUnit = 'px';
+    private $tipOffsetYUnit = 'px';
+    private $tipContainer = false;
     private $linkWindow = 'same';
     private $sticky = 'false';
@@ -143 +146 @@
                               'tipOffsetX' => $this->tipOffsetX,
                               'tipOffsetY' => $this->tipOffsetY,
+                              // 'tipOffsetXUnit' => $this->tipOffsetXUnit,
+                              // 'tipOffsetYUnit' => $this->tipOffsetYUnit,
+                              'tipContainer' => $this->tipContainer,
                               'linkWindow' => $this->linkWindow,
                               'sticky' => $this->sticky,
@@ -223 +229 @@
 
         $useDivContent = ($this->getOption('useDivContent') === true) ? "true" : "false";
+        $setContainer = ($this->getOption('tipContainer') === "") ? "false" : '"'. $this->getOption('tipContainer') .'"';
         
         echo '
@@ -228 +235 @@
                 Tippy.initialize({
                     tipPosition: "'. $this->getOption("tipPosition") .'",
+                    tipContainer: '. $setContainer .',
                     tipOffsetX: '. $this->getOption("tipOffsetX") .',
                     tipOffsetY: '. $this->getOption("tipOffsetY") .',
@@ -278 +286 @@
             $this->tipOffsetX = intval($_POST['tipOffsetX']);
             $this->tipOffsetY = intval($_POST['tipOffsetY']);
+            // $this->tipOffsetX = sanitize_text_field($_POST['tipOffsetXUnit']);
+            // $this->tipOffsetY = sanitize_text_field($_POST['tipOffsetYUnit']);
+            $this->tipContainer = isset($_POST['tipContainer']) ? sanitize_text_field($_POST['tipContainer']) : false;
             $this->linkWindow = sanitize_text_field($_POST['linkWindow']);
             $this->sticky = sanitize_text_field($_POST['sticky']);
@@ -322 +333 @@
                                           'offsetx' => false,
                                           'offsety' => false,
+                                          'position' => false,
+                                          'method' => false,
+                                          'container' => false,
                                           'img' => false), $attributes);
         
@@ -355 +369 @@
                           'offsetx' => $tippyAtts['offsetx'],
                           'offsety' => $tippyAtts['offsety'],
+                          'position' => $tippyAtts['position'],
+                          'method' => $tippyAtts['method'],
+                          'container' => $tippyAtts['container'],
                           'img' => $tippyAtts['img']);
         
@@ -407 +424 @@
      * 'bottom' => Optional int; specifies bottom position in pixels.
      * 'right' => Optional int; specifies right position in pixels.
-     * 'useDiv' => Optional bool; should we use the new method of inserting content?
+     * 'position' => Optional string; specify position (link|mouse|absolute|fixed)
+     * 'method' => Option string; specify method to load content (embed|append)
+     * 'useDiv' => Optional bool; should we use the new method of inserting content? (deprecated)
+     * 'container' => Optional string; css selector which specifies which element should be the parent of the tooltip
      * ];
     */
@@ -442 +462 @@
         $tippyOffsetX = isset($tippyArray['offsetx']) ? $tippyArray['offsetx'] : false;
         $tippyOffsetY = isset($tippyArray['offsety']) ? $tippyArray['offsety'] : false;
+        $tippyPosition = isset($tippyArray['position']) ? $tippyArray['position'] : false;
+        $tippyMethod = isset($tippyArray['method']) ? $tippyArray['method'] : false;
+        $tippyContainer = isset($tippyArray['container']) ? $tippyArray['container'] : false;
         $tippyImg = isset($tippyArray['img']) ? $tippyArray['img'] : false;
         $tippyUseDiv = isset($tippyArray['useDiv']) ? $tippyArray['useDiv'] : false;
@@ -479 +502 @@
 
             // See if we are using the experimental content method
-            if ($this->getOption('useDivContent') === 'true' || $tippyUseDiv === true) {
+            if (($this->getOption('useDivContent') === 'true' || $tippyUseDiv === true) && (!$tippyMethod || $tippyMethod === "append")) {
                 $this->addContent($tippyTitle, $tippyText, $tippyId);
             } else {
@@ -557 +580 @@
                 $this->addTippyObjectValue("offsety", (int)$tippyOffsetY, "%d");
             }
+
+            if ($tippyPosition !== false) {
+                $this->addTippyObjectValue("position", $tippyPosition, "'%s'");
+            }
+
+            if ($tippyContainer !== false) {
+                $this->addTippyObjectValue("container", $tippyContainer, "'%s'");
+            }
             
             // Check class/id
@@ -565 +596 @@
 
             if (!empty($tippyName)) {
-                $tippyLinkName = sprintf('name="%s"', $tippyName);
+                $tippyLinkName = 'name="'. $tippyName .'" ';
             }
             
@@ -573 +604 @@
             }
             
-            $returnText = sprintf('<a %s id="%s" class="%s" %s %s %s %s="Tippy.loadTip({ %s, event: event });" %s>%s</a>', $tippyLinkName, $tippyId, $tippyLinkClass, $tippyHref, $tippyTarget, $tippyTitleAttribute, $activateTippy, $this->tippyObject, $tippyMouseOut, $tippyLinkText);
+            $returnText = sprintf('<a '. $tippyLinkName .' id="%s" class="%s" %s %s %s %s="Tippy.loadTip({ %s, event: event });" %s>%s</a>', $tippyId, $tippyLinkClass, $tippyHref, $tippyTarget, $tippyTitleAttribute, $activateTippy, $this->tippyObject, $tippyMouseOut, $tippyLinkText);
 
             // Clear the object
@@ -589 +620 @@
 
         if (!empty($valueType)) {
-            $this->tippyObject .= sprintf($valueName .": ". $valueType, $valueSetting);
+            $this->tippyObject .= sprintf($valueName .": $valueType", $valueSetting);
         } else {
             $this->tippyObject .= $valueName .": ". $valueSetting;

tippy/trunk/tippy_admin.php

@@ -29 +29 @@
 
         <div class="tippyOptionSection">
-            <div class="tippyHeader"><span>Tooltip Trigger</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Do you want the tooltip to automatically appear when a visitor hovers over the Tippy link, or should they have to click the link first?[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Tooltip Trigger</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Do you want the tooltip to automatically appear when a visitor hovers over the Tippy link, or should they have to click the link first?[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_openTip_hover" name="openTip"  type="radio" value="hover" <?php if ($tippy->getOption('openTip') == "hover") echo "checked" ?> />
@@ -42 +42 @@
             </div>
 
-            <div class="tippyHeader"><span>Show/Hide</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Should the tooltip use a fade in/fade out effect, or should it display and hide with no fade effect?[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Show/Hide</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Should the tooltip use a fade in/fade out effect, or should it display and hide with no fade effect?[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_fadeTip_fade" name="fadeTip"  type="radio" value="fade" <?php if ($tippy->getOption('fadeTip') == "fade") echo "checked" ?> />
@@ -55 +55 @@
             </div>
 
-            <div class="tippyHeader"><span>Fade time</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]If you want to display a fade effect, how long should the fade effect last? A higher value means the tooltip will take longer to fade in/out.[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Fade time</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]If you want to display a fade effect, how long should the fade effect last? A higher value means the tooltip will take longer to fade in/out.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <label for="tippy_faderate">
@@ -63 +63 @@
             </div>
 
-            <div class="tippyHeader"><span>Close method</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Should the tooltip automatically disappear when the visitor mouses away, or should visitors have to manually close the tooltip? (Note, you will need to be sure to specify "Show close links" if you set this to remain sticky.)[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Close method</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Should the tooltip automatically disappear when the visitor mouses away, or should visitors have to manually close the tooltip? (Note, you will need to be sure to specify "Show close links" if you set this to remain sticky.)[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_sticky_auto" name="sticky" type="radio" value="false" <?php if ($tippy->getOption('sticky') == "false") echo "checked" ?> />
@@ -76 +76 @@
             </div>
 
-            <div class="tippyHeader"><span>Disappear Delay</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]If you selected for the tooltip to automatically close, how long should it wait before closing? This allows users to mouse away briefly without the tooltip closing right away. Set to 0 if you want it to immediately close.[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Disappear Delay</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]If you selected for the tooltip to automatically close, how long should it wait before closing? This allows users to mouse away briefly without the tooltip closing right away. Set to 0 if you want it to immediately close.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <label for="tippy_delay">
@@ -84 +84 @@
             </div>
 
-            <div class="tippyHeader"><span>Close Link</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Do you want to display a Close link so visitors can manually close the tooltip? If so, what should the Close link say?[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Close Link</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Do you want to display a Close link so visitors can manually close the tooltip? If so, what should the Close link say?[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_showClose" name="showClose" type="checkbox" value="true" <?php if ($tippy->getOption('showClose') == 'true') echo "checked" ?> /> 
@@ -99 +99 @@
 
         <div class="tippyOptionSection">        
-            <div class="tippyHeader"><span>Link Target</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]If you specify a url for your Tippy or Header link, should the url open in a new window or the same window?[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Link Target</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]If you specify a url for your Tippy or Header link, should the url open in a new window or the same window?[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_linkWindow_same" name="linkWindow" type="radio" value="same" <?php if ($tippy->getOption('linkWindow') == "same") echo "checked" ?> />
@@ -112 +112 @@
             </div>
             
-            <div class="tippyHeader"><span>Tooltip Location</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Do you want the tooltip to appear relative to the Tippy link or relative to the mouse pointer?[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Tooltip Location</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Decide where you want the tooltip to appear. If you specify absolute or fixed, you need to set the x/y offset below or set the offset per-tooltip.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_tipPosition_link" name="tipPosition" type="radio" value="link" <?php if ($tippy->getOption('tipPosition') == "link") echo "checked" ?> />
@@ -122 +122 @@
                     <label for="tippy_tipPosition_mouse">
                         Tooltip positioned under the mouse pointer
-                    </label>
+                    </label><br />
+
+                <input id="tippy_tipPosition_container" name="tipPosition"  type="radio" value="absolute" <?php if ($tippy->getOption('tipPosition') == "absolute") echo "checked" ?> />
+                    <label for="tippy_tipPosition_container">
+                        Tooltip absolute positioned to the containing element.
+                    </label><br />
+
+                <input id="tippy_tipPosition_fixed" name="tipPosition"  type="radio" value="fixed" <?php if ($tippy->getOption('tipPosition') == "fixed") echo "checked" ?> />
+                    <label for="tippy_tipPosition_fixed">
+                        Tooltip in a fixed position.
+                    </label>
+            </div>
+
+            <div class="tippyHeader"><span>Tooltip Container</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]By default, Tippy is located as a child of the body element. If you put a CSS selector here, Tippy will be moved inside that element. Might be useful if you switch position to absolute and set the new container to position: relative since Tippy\'s position will be determined by that element.[/tippy]'); ?>)</div>
+            <div class="tippyOptions">
+                <div style="display: inline-block; width: 100px;">
+                    <label for="tippy_tipContainer">
+                        Tippy container: 
+                    </label>
+                </div>
+                <input id="tippy_tipContainer" name="tipContainer" size="10" type="text" value="<?php echo $tippy->getOption('tipContainer'); ?>" /> Leave empty for default
             </div>
             
-            <div class="tippyHeader"><span>Tooltip Offset</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Specify X/Y offsets if you want to nudge the tooltip around - make it display farther away from its trigger position. Give it negative values to move it up or left, positive values for right or down.[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Tooltip Offset</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Specify X/Y offsets if you want to nudge the tooltip around - make it display farther away from its trigger position. Give it negative values to move it up or left, positive values for right or down.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <div style="display: inline-block; width: 100px;">
@@ -132 +152 @@
                     </label>
                 </div>
-                <input id="tippy_tipOffsetX" name="tipOffsetX" size="3" type="text" value="<?php echo $tippy->getOption('tipOffsetX'); ?>" />px<br />
+                <input id="tippy_tipOffsetX" name="tipOffsetX" size="3" type="text" value="<?php echo $tippy->getOption('tipOffsetX'); ?>" /> px
+                <?php /* Possibility later on
+                <select name="tipOffsetXUnit">
+                    <option value="px" <?php if ($tippy->getOption('tipOffsetXUnit') == "px") { echo 'checked="checked"'; } ?>>px</option>
+                    <option value="em" <?php if ($tippy->getOption('tipOffsetXUnit') == "em") { echo 'checked="checked"'; } ?>>em</option>
+                    <option value="pct" <?php if ($tippy->getOption('tipOffsetXUnit') == "pct") { echo 'checked="checked"'; } ?>>pct</option>
+                </select>
+                */ ?>
+                <br />
                 
                 <div style="display: inline-block; width: 100px;">
@@ -139 +167 @@
                     </label>
                 </div>
-                <input id="tippy_tipOffsetY" name="tipOffsetY" size="3" type="text" value="<?php echo $tippy->getOption('tipOffsetY'); ?>" />px
+                <input id="tippy_tipOffsetY" name="tipOffsetY" size="3" type="text" value="<?php echo $tippy->getOption('tipOffsetY'); ?>" /> px
+                <?php /* Possibility later on
+                <select name="tipOffsetYUnit">
+                    <option value="px" <?php if ($tippy->getOption('tipOffsetYUnit') == "px") { echo 'checked="checked"'; } ?>>px</option>
+                    <option value="em" <?php if ($tippy->getOption('tipOffsetYUnit') == "em") { echo 'checked="checked"'; } ?>>em</option>
+                    <option value="pct" <?php if ($tippy->getOption('tipOffsetYUnit') == "pct") { echo 'checked="checked"'; } ?>>pct</option>
+                </select>
+                */ ?>
                 
             </div>
             
-            <div class="tippyHeader"><span>Title Attribute</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]For SEO and Accessibility best practices, it is best to add a title attribute to link elements. Most browsers display the title as a miniature tooltip (for instance, a small yellow box under the pointer). This can get in the way of Tippy. Specify whether or not you want to include a title in your Tippy links.[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Title Attribute</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]For SEO and Accessibility best practices, it is best to add a title attribute to link elements. Most browsers display the title as a miniature tooltip (for instance, a small yellow box under the pointer). This can get in the way of Tippy. Specify whether or not you want to include a title in your Tippy links.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_showTitle" name="showTitle" type="checkbox" value="true" <?php if ($tippy->getOption('showTitle') == "true") echo "checked" ?> /> 
@@ -151 +186 @@
             </div>
 
-            <div class="tippyHeader"><span>Draggable Tooltips</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Uses jQuery UI. Allow users to drag tooltips around. Specify whether dragging should work from the header only or from any part of the tooltip.<br /><br />For best results, set the tooltip to sticky and limit dragging to the header.[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Draggable Tooltips</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Uses jQuery UI. Allow users to drag tooltips around. Specify whether dragging should work from the header only or from any part of the tooltip.<br /><br />For best results, set the tooltip to sticky and limit dragging to the header.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_dragTips" name="dragTips" type="checkbox" value="true" <?php if ($tippy->getOption('dragTips') == "true") echo "checked" ?> /> 
@@ -164 +199 @@
             </div>
 
-            <div class="tippyHeader"><span>Experimental</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" delay="900" offsetx="0" offsety="10" width="400"]Provides a much better method of adding your content to a Tippy tooltip. The new approach should permit a greater range of content to go inside a tooltip. If you have trouble getting certain content to display, turn this on and see if it works. Please report success or problems to <a href="mailto:[email protected]">Chris Roberts</a>.[/tippy]'); ?>)</div>
+            <div class="tippyHeader"><span>Experimental</span> (<?php echo do_shortcode('[tippy title="info" header="off" autoclose="true" method="embed" position="link" delay="900" offsetx="0" offsety="10" width="400"]Provides a much better method of adding your content to a Tippy tooltip. The new approach should permit a greater range of content to go inside a tooltip. If you have trouble getting certain content to display, turn this on and see if it works. Please report success or problems to <a href="mailto:[email protected]">Chris Roberts</a>.[/tippy]'); ?>)</div>
             <div class="tippyOptions">
                 <input id="tippy_useDivContent" name="useDivContent" type="checkbox" value="true" <?php if ($tippy->getOption('useDivContent') === "true") echo "checked" ?> />