Permalink
Browse files

Merge pull request #812 from nicinabox/tooltips

Fix tooltips to have extendable settings
  • Loading branch information...
zurbchris committed Sep 4, 2012
2 parents 9587688 + 67a6e3f commit 9fc70a11017839ccd6c6a1904e72a1153d4994c6
Showing with 27 additions and 18 deletions.
  1. +25 −18 test/elements.html
  2. +2 −0 vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js
View
@@ -23,7 +23,7 @@
<![endif]-->
</head>
<body>
-
+
<div class="row">
<div class="twelve columns">
<p><a href="index.html">&laquo; Back</a></p>
@@ -40,11 +40,11 @@ <h2>Foundation Elements Testing</h2>
<dd><a href="#panels">Panels</a></dd>
<dd><a href="#link-list">Link List</a></dd>
<dd><a href="#video">Video</a></dd>
-
+
</dl>
</div>
</div>
-
+
<!-- Test Foundation Components Here -->
<div class="row">
<div class="twelve columns">
@@ -95,7 +95,7 @@ <h5>Media Query Viewer</h5>
<p>Easily add the ability to show which media query you are currently viewing. To activate the viewer, make sure you have <strong>jquery.foundation.mediaQueryToggle.js</strong> linked up on your page. From there, simply add the markup to your page or press <kbd>M</kbd>. The keyboard toggle won't work on mobile devices so make sure you add the markup in those cases.</p>
</div>
</div>
-
+
<br><br>
<div class="row">
@@ -127,7 +127,7 @@ <h4>Alerts</h4>
</div>
</div>
</div>
-
+
<br><br>
<div class="row">
@@ -157,7 +157,7 @@ <h4>Labels</h4>
<p><span class="radius label">Example Label</span> This label could read a date for an update or it could include an author name or anything really. Inline labels are pretty handy when you need to draw attention or visually separate a short piece of content.</p>
</div>
</div>
-
+
<br><br>
<div class="row">
@@ -171,11 +171,16 @@ <h4>Tooltips</h4>
<br>
<div class="eight columns">
<p>The tooltips can be positioned on the <span class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">"tip-top" (hehe)</span>, <span class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element. On a small device, the tooltips are full width and bottom aligned.</p>
+
+ <h3>Custom Options</h3>
+ <p>
+ I have <span class="has-tip-custom" title="See? Custom class here.">custom attributes.</span>
+ </p>
</div>
- </div>
-
+ </div>
+
<br><br>
-
+
<div class="row">
<div class="four columns">
<a name="accordion"></a>
@@ -215,7 +220,7 @@ <h5>Accordion Panel 3</h5>
</ul>
</div>
</div>
-
+
<br><br>
<div class="row">
@@ -229,7 +234,7 @@ <h4>Keystrokes</h4>
<p>For example, to close your browser hit <kbd>Cmd</kbd> + <kbd>Q</kbd>. Don't actually do it. There's more docs to read.</p>
</div>
</div>
-
+
<br><br>
<div class="row">
@@ -256,7 +261,7 @@ <h5>This is a callout panel.</h5>
</div>
</div>
</div>
-
+
<br><br>
<div class="row">
@@ -276,9 +281,9 @@ <h4>Link List</h4>
</ul>
</div>
</div>
-
+
<br><br>
-
+
<div class="row">
<div class="four columns">
<a name="video"></a>
@@ -314,10 +319,10 @@ <h4>Video</h4>
</ul>
</div>
</div>
-
+
</div>
</div>
-
+
<!-- Included JS Files -->
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
@@ -333,7 +338,9 @@ <h4>Video</h4>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
<script type="text/javascript">
- // Page-Specific JavaScript Goes Here
- </script>
+ $(document).tooltips({
+ targetClass: '.has-tip-custom, .has-tip'
+ });
+ </script>
</body>
</html>
@@ -20,6 +20,8 @@
},
methods = {
init : function (options) {
+ settings = $.extend(settings, options);
+
return this.each(function () {
var $body = $('body');

0 comments on commit 9fc70a1

Please sign in to comment.