Tool Tip for forumotion.

I was trying to find out how to get a tool tip on forumotion. So i looked it up on google. Unfortunatly the link to the answer no longer exists. (http://forum-design.forumotion.com/t20-how-to-add-tipsy-tooltip-on-your-forum) It also looks like a very old topic since then guests could create topics. The link to that is https://help.forumotion.com/t99869-tipsy-tooltip. Anyone know the code to make one?



2014-01-11, 18:41:56

I also found this: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/ can it work? If so where would i put it? If not can it be transferred to a version where it works on forumotion forums?

Please read this http://www.csshelp.net/t42-tutorial-how-to-add-tooltips-on-your-forum

I added the code but how do i make a word have a tooltip

luiz1877 wrote:I added the code but how do i make a word have a tooltip

It should automatically do this. It could take sometime before it begins to work.

No, is not doing it automatically in this Javascript you need to add the class or id for the element you want the tipsy to show.

Code:

        $(function() {
            $('#north').tipsy({gravity: 'n'});
            $('#south').tipsy({gravity: 's'});
            $('#east').tipsy({gravity: 'e'});
            $('#west').tipsy({gravity: 'w'});
            $('#north-west').tipsy({gravity: 'nw'});
            $('#north-east').tipsy({gravity: 'ne'});
            $('#south-west').tipsy({gravity: 'sw'});
            $('#south-east').tipsy({gravity: 'se'});
          });

??? I confused. I want to add a tooltip for certain things like on daily-support.org. What am i adding in your code??? I am wanting to add a tooltip that is for luiz187 and have it say "This Forums Owner"

Code:

        $(function() {
                $('#luiz187).tipsy({gravity: 'This Forums Owner'});
            });

So do i add this to javasript?

Correct

Not working...

You should two JavaScripts: one for the code for the Tooltip and one for the words that you want to use.

Did you add the CSS?

No, i only added:

Code:

$(function() {
                $('#luiz187).tipsy({gravity: 'This Forums Owner'});
             });

You need to read this again - http://www.csshelp.net/t42-tutorial-how-to-add-tooltips-on-your-forum .

There are three steps.

Those 3 steps +

Code:

$(function() {
                $('#luiz187).tipsy({gravity: 'This Forums Owner'});
             });

Right?

That is the second step.

Javascript 1

Code:

// tipsy, facebook style tooltips for jquery
    // version 1.0.0a
    // (c) 2008-2010 jason frame [jason@onehackoranother.com]
    // releated under the MIT license
 
    (function($) {
     
        function fixTitle($ele) {
            if ($ele.attr('title') || typeof($ele.attr('original-title')) != 'string') {
                $ele.attr('original-title', $ele.attr('title') || '').removeAttr('title');
            }
        }
     
        function Tipsy(element, options) {
            this.$element = $(element);
            this.options = options;
            this.enabled = true;
            fixTitle(this.$element);
        }
     
        Tipsy.prototype = {
            show: function() {
                var title = this.getTitle();
                if (title && this.enabled) {
                    var $tip = this.tip();
                 
                    $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
                    $tip[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 pos = $.extend({}, this.$element.offset(), {
                        width: this.$element[0].offsetWidth,
                        height: this.$element[0].offsetHeight
                    });
                 
                    var actualWidth = $tip[0].offsetWidth, actualHeight = $tip[0].offsetHeight;
                    var gravity = (typeof this.options.gravity == 'function')
                                    ? this.options.gravity.call(this.$element[0])
                                    : this.options.gravity;
                 
                    var tp;
                    switch (gravity.charAt(0)) {
                        case 'n':
                            tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
                            break;
                        case 's':
                            tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
                            break;
                        case 'e':
                            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
                            break;
                        case 'w':
                            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
                            break;
                    }
                 
                    if (gravity.length == 2) {
                        if (gravity.charAt(1) == 'w') {
                            tp.left = pos.left + pos.width / 2 - 15;
                        } else {
                            tp.left = pos.left + pos.width / 2 - actualWidth + 15;
                        }
                    }
                 
                    $tip.css(tp).addClass('tipsy-' + gravity);
                 
                    if (this.options.fade) {
                        $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
                    } else {
                        $tip.css({visibility: 'visible', opacity: this.options.opacity});
                    }
                }
            },
         
            hide: function() {
                if (this.options.fade) {
                    this.tip().stop().fadeOut(function() { $(this).remove(); });
                } else {
                    this.tip().remove();
                }
            },
         
            getTitle: function() {
                var title, $e = this.$element, o = this.options;
                fixTitle($e);
                var title, o = this.options;
                if (typeof o.title == 'string') {
                    title = $e.attr(o.title == 'title' ? 'original-title' : o.title);
                } else if (typeof o.title == 'function') {
                    title = o.title.call($e[0]);
                }
                title = ('' + title).replace(/(^\s*|\s*$)/, "");
                return title || o.fallback;
            },
         
            tip: function() {
                if (!this.$tip) {
                    this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>');
                }
                return this.$tip;
            },
         
            validate: function() {
                if (!this.$element[0].parentNode) {
                    this.hide();
                    this.$element = null;
                    this.options = null;
                }
            },
         
            enable: function() { this.enabled = true; },
            disable: function() { this.enabled = false; },
            toggleEnabled: function() { this.enabled = !this.enabled; }
        };
     
        $.fn.tipsy = function(options) {
         
            if (options === true) {
                return this.data('tipsy');
            } else if (typeof options == 'string') {
                return this.data('tipsy')[options]();
            }
         
            options = $.extend({}, $.fn.tipsy.defaults, options);
         
            function get(ele) {
                var tipsy = $.data(ele, 'tipsy');
                if (!tipsy) {
                    tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
                    $.data(ele, 'tipsy', tipsy);
                }
                return tipsy;
            }
         
            function enter() {
                var tipsy = get(this);
                tipsy.hoverState = 'in';
                if (options.delayIn == 0) {
                    tipsy.show();
                } else {
                    setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
                }
            };
         
            function leave() {
                var tipsy = get(this);
                tipsy.hoverState = 'out';
                if (options.delayOut == 0) {
                    tipsy.hide();
                } else {
                    setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
                }
            };
         
            if (!options.live) this.each(function() { get(this); });
         
            if (options.trigger != 'manual') {
                var binder  = options.live ? 'live' : 'bind',
                    eventIn  = options.trigger == 'hover' ? 'mouseenter' : 'focus',
                    eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
                this[binder](eventIn, enter)[binder](eventOut, leave);
            }
         
            return this;
         
        };
     
        $.fn.tipsy.defaults = {
            delayIn: 0,
            delayOut: 0,
            fade: false,
            fallback: '',
            gravity: 'n',
            html: false,
            live: false,
            offset: 0,
            opacity: 0.8,
            title: 'title',
            trigger: 'hover'
        };
     
        // 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.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);

Javascript 2

Code:

$(document).ready(function(){
  $(function() {
$('a').tipsy({fade: true, gravity: 's'});
});
});

To add tipsy to more than one spots add the below code:

Code:

$(document).ready(function(){
  $(function() {
$('a').tipsy({fade: true, gravity: 's'});
$('*spot here*').tipsy({fade: true, gravity: '*and here you change the letters (s,w,n) so it goes up, down, to the right*'});
});
});

and CSS

Code:

.tipsy {
padding: 5px;
font-size: 10px;
position: absolute;
text-shadow: none;
z-index: 999;}
.tipsy-inner {
padding: 5px 5px 5px 5px;
background: black url(http://i41.servimg.com/u/f41/14/81/40/78/gradie10.png) repeat-x 0 -150px ;
background-color: black;
color: white;
max-width: 200px;
text-align: center;
box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
.tipsy-inner {
border-radius: 3px;}
.tipsy-arrow {
position: absolute;
background: url('http://i43.servimg.com/u/f43/15/93/99/44/tipsy10.gif') no-repeat top left;
width: 9px;
height: 5px;}
.tipsy-n .tipsy-arrow {
top: 0;
left: 50%;
margin-left: -4px;}
.tipsy-nw .tipsy-arrow {
top: 0;
left: 10px;}
.tipsy-ne .tipsy-arrow {
top: 0;
right: 10px;}
.tipsy-s .tipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -4px;
background-position: bottom left;}
.tipsy-sw .tipsy-arrow {
bottom: 0;
left: 10px;
background-position: bottom left;}
.tipsy-se .tipsy-arrow {
bottom: 0;
right: 10px;
background-position: bottom left;}
.tipsy-e .tipsy-arrow {
top: 50%;
margin-top: -4px;
right: 0;
width: 5px;
height: 9px;
background-position: top right;
}
.tipsy-w .tipsy-arrow {
top: 50%;
margin-top: -4px;
left: 0;
width: 5px;
height: 9px;}
div#header div#slide-holder {
height: 299px;
position: absolute;
max-width: 582px;
z-index: 40;
}

Codes from The Greeks Energy.