Skip to content
Browse files

Add the jQuery Tipsy plugin for some nice tooltips.

  • Loading branch information...
1 parent f953ab9 commit 43b072294bd51b0f59cfe88a2c2cf5e05ceeb1e9 @chrismeller committed Apr 15, 2011
View
4 block.cwm_social_icons.php
@@ -3,8 +3,8 @@
<div class="wrap">
- <a href="https://github.com/chrismeller" id="github" title="Github"><span>Github</span></a>
- <a href="http://twitter.com/chrismeller" id="twitter" title="Twitter"><span>Twitter</span></a>
+ <a href="https://github.com/chrismeller" id="github" class="tipsy" title="Github"><span>Github</span></a>
+ <a href="http://twitter.com/chrismeller" id="twitter" class="tipsy" title="Twitter"><span>Twitter</span></a>
<br class="clear" />
View
5 theme.php
@@ -28,6 +28,11 @@ public function action_init_theme ( $theme ) {
Stack::add( 'template_header_javascript', Site::get_url( 'scripts' ) . '/jquery.js', 'jquery' );
Stack::add( 'template_header_javascript', Site::get_url( 'theme' ) . '/js/main.js', 'cwm_main_js', 'jquery' );
+ // now jquery tipsy!
+ Stack::add( 'template_header_javascript', Site::get_url( 'theme' ) . '/tipsy/javascripts/jquery.tipsy.js', 'tipsy', 'jquery' );
+ Stack::add( 'template_header_javascript', "$(document).ready( function() { $('a[class=tipsy]').tipsy( {gravity: 'n' } ); console.log('tipsy');} );", 'tipsy-start', 'tipsy' );
+ Stack::add( 'template_stylesheet', array( Site::get_url( 'theme' ) . '/tipsy/stylesheets/tipsy.css', 'screen' ), 'tipsy' );
+
}
}
View
BIN tipsy/.DS_Store
Binary file not shown.
View
BIN tipsy/images/tipsy.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
104 tipsy/javascripts/jquery.tipsy.js
@@ -0,0 +1,104 @@
+(function($) {
+ $.fn.tipsy = function(options) {
+
+ options = $.extend({}, $.fn.tipsy.defaults, options);
+
+ return this.each(function() {
+
+ var opts = $.fn.tipsy.elementOptions(this, options);
+
+ $(this).hover(function() {
+
+ $.data(this, 'cancel.tipsy', true);
+
+ var tip = $.data(this, 'active.tipsy');
+ if (!tip) {
+ tip = $('<div class="tipsy"><div class="tipsy-inner"/></div>');
+ tip.css({position: 'absolute', zIndex: 100000});
+ $.data(this, 'active.tipsy', tip);
+ }
+
+ if ($(this).attr('title') || typeof($(this).attr('original-title')) != 'string') {
+ $(this).attr('original-title', $(this).attr('title') || '').removeAttr('title');
+ }
+
+ var title;
+ if (typeof opts.title == 'string') {
+ title = $(this).attr(opts.title == 'title' ? 'original-title' : opts.title);
+ } else if (typeof opts.title == 'function') {
+ title = opts.title.call(this);
+ }
+
+ tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback);
+
+ var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
+ tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity
+ tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
+ var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight;
+ var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(this) : opts.gravity;
+
+ switch (gravity.charAt(0)) {
+ case 'n':
+ tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north');
+ break;
+ case 's':
+ tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south');
+ break;
+ case 'e':
+ tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east');
+ break;
+ case 'w':
+ tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west');
+ break;
+ }
+
+ if (opts.fade) {
+ tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 0.8});
+ } else {
+ tip.css({visibility: 'visible'});
+ }
+
+ }, function() {
+ $.data(this, 'cancel.tipsy', false);
+ var self = this;
+ setTimeout(function() {
+ if ($.data(this, 'cancel.tipsy')) return;
+ var tip = $.data(self, 'active.tipsy');
+ if (opts.fade) {
+ tip.stop().fadeOut(function() { $(this).remove(); });
+ } else {
+ tip.remove();
+ }
+ }, 100);
+
+ });
+
+ });
+
+ };
+
+ // Overwrite this method to provide options on a per-element basis.
+ // For example, you could store the gravity in a 'tipsy-gravity' attribute:
+ // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
+ // (remember - do not modify 'options' in place!)
+ $.fn.tipsy.elementOptions = function(ele, options) {
+ return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
+ };
+
+ $.fn.tipsy.defaults = {
+ fade: false,
+ fallback: '',
+ gravity: 'n',
+ html: false,
+ title: 'title'
+ };
+
+ $.fn.tipsy.autoNS = function() {
+ return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
+ };
+
+ $.fn.tipsy.autoWE = function() {
+ return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
+ };
+
+})(jQuery);
View
7 tipsy/stylesheets/tipsy.css
@@ -0,0 +1,7 @@
+.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; background-image: url(../images/tipsy.gif); }
+ .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
+ .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
+ .tipsy-north { background-position: top center; }
+ .tipsy-south { background-position: bottom center; }
+ .tipsy-east { background-position: right center; }
+ .tipsy-west { background-position: left center; }

0 comments on commit 43b0722

Please sign in to comment.
Something went wrong with that request. Please try again.