Choose from our various pricing plans. There is a package for everyone!


How to add Tooltips on your forum

Page 2 of 3 Previous  1, 2, 3  Next

View previous topic View next topic Go down

Tutorial How to add Tooltips on your forum

Post by Mati™ on Sun Apr 08, 2012 7:42 pm

First topic message reminder :

Hello, in this tutorial you will learn how to to add tooltip on your forum. This tutorial is compatible for all forum versions.

- Step 1: Go to the Administration Panel => Modules Tab => Javascript codes management => Create a new javascript and put this in

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);

- Step 2: Again to => Modules Tab => Javascript codes management => Create a new javascript and put this in for the classes name it whatever you want and set its placement to all pages.

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'});
  });

- Step 3: Go to the Administration Panel => Display => Pictures and Colors --> Colors => CSS Stylesheet put in the and save:

The CSS:
Code:
/* tipsy
----------------------------------------------- */
.tipsy { padding: 5px; font-size: 10px; position: absolute; z-index: 999; }
  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 250px; text-align: center; }
  .tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
  .tipsy-arrow { position: absolute; background: url('http://onehackoranother.com/projects/jquery/tipsy/stylesheets/../images/tipsy.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; }

DEMO: in this forum and here http://onehackoranother.com/projects/jquery/tipsy/

Hope you guys like this. Please don't forget to drop your comments.


Last edited by Mati™ on Sat Nov 08, 2014 5:46 pm; edited 5 times in total
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down


Tutorial Re: How to add Tooltips on your forum

Post by Mr BadHaxers2 on Fri May 25, 2012 2:07 pm

I did
avatar
Mr BadHaxers2
Member Banned


Age : 18
Posts : 39
Join date : 2012-04-07
Reputation : 4

View user profile http://gamingoflife.forumotion.com/

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Shadow on Fri Jun 29, 2012 9:06 pm

Ye it's not works, hope you will add that in mine forums Razz
avatar
Shadow
Premium Member


Posts : 30
Join date : 2012-04-25
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Mati™ on Sat Jun 30, 2012 11:49 am

Shadow wrote:Ye it's not works, hope you will add that in mine forums Razz

I'll fix that for you so don't worry Smile
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by MrZondervan on Mon Aug 06, 2012 4:33 pm

So I did this now.. But how to I call a tipsy tooltip?
avatar
MrZondervan
Member
Member

Age : 32
Posts : 72
Join date : 2012-08-03
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Mati™ on Mon Aug 06, 2012 5:20 pm

call it whatever you want.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by MrZondervan on Mon Aug 06, 2012 7:05 pm

No I don't mean that ..

How can I call a tooltip? I mean they don't automatically appear.
avatar
MrZondervan
Member
Member

Age : 32
Posts : 72
Join date : 2012-08-03
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Mati™ on Mon Aug 06, 2012 8:17 pm

Well, you need to add id or class for the elements you want the tipsy to appear to this code.

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'});
      });
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Eclipse on Tue Aug 14, 2012 11:12 pm

Hmm, this didnt work, i don't understand what im doing wrong




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Eclipse on Mon Aug 20, 2012 10:23 am

Bump




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Mati™ on Mon Aug 20, 2012 10:40 am

Make me admin on your forum and I will fix it.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Eclipse on Mon Aug 20, 2012 10:42 am

Ok, ill make you admin after you register




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Mati™ on Mon Aug 20, 2012 11:00 am

HyperActive wrote:Ok, ill make you admin after you register

Which forum "SuperiorGaming" or another one?
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Eclipse on Mon Aug 20, 2012 11:04 am

It's fine now i guess, i was going to ask for my promotion forum, but i enjoy working with you guys on yours, it's very fun.




avatar
Eclipse
Premium Member


Age : 19
Posts : 212
Join date : 2012-07-23
Forum Version : PunBB
Reputation : 3

View user profile http://discussionhq.com/

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by tommycoo on Thu Aug 23, 2012 1:46 am

can u give some tips for using this trick on hover subforum/forum description
avatar
tommycoo
Member
Member

Age : 21
Posts : 60
Join date : 2012-08-20
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by tommycoo on Sun Sep 16, 2012 2:30 am

help please Smile
avatar
tommycoo
Member
Member

Age : 21
Posts : 60
Join date : 2012-08-20
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Th1nK on Sun Sep 16, 2012 11:15 am

I think Matti can give you that, but now he is missing.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by tommycoo on Mon Sep 17, 2012 8:41 am

yup but can someone help me Smile
avatar
tommycoo
Member
Member

Age : 21
Posts : 60
Join date : 2012-08-20
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by tommycoo on Sat Nov 17, 2012 8:17 am

help?
avatar
tommycoo
Member
Member

Age : 21
Posts : 60
Join date : 2012-08-20
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Nick! on Sun Dec 02, 2012 8:29 am

Very nice, can't hardly find this anywhere, but anyways thanks.

Nick!
Member
Member

Posts : 25
Join date : 2012-04-06
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Nathan Adhitya on Tue Mar 12, 2013 2:48 am

mattti it's not working on my site
ive used this on my header.... in my header.php
Code:
<?php
echo "
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>".$websiteName."</title>
<link href='".$template."/style.css' rel='stylesheet' type='text/css' />
".$custom_head."
<script src='models/funcs.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery.js' type='text/javascript'></script>

<noscript>
<meta http-equiv='refresh' content='0;url=/no-js.html'>
</noscript>
</head>";

?>
anyway ive added this to my funcs.js
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);



  $(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'});
  });
and the console says
Code:
Uncaught TypeError: Object [object Object] has no method 'tipsy'
avatar
Nathan Adhitya
Member
Member

Age : 17
Posts : 35
Join date : 2012-07-08
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by RSguideMaker on Wed Mar 27, 2013 12:26 am

Please open a support topic in the correct forum.



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by refresh101 on Mon May 13, 2013 9:07 am

Hello Its Not Working There Is No Tipsy There Sad.My Version PhPBB3
avatar
refresh101
Member
Member

Age : 27
Posts : 18
Join date : 2013-05-03
Forum Version : PhpBB2
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Mati™ on Mon May 13, 2013 11:48 am

refresh101 wrote:Hello Its Not Working There Is No Tipsy There Sad.My Version PhPBB3

Because you dont know how to use it... so tell me where you want to show tips.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by arijitsen on Wed Aug 07, 2013 2:17 am

Sorry for the BUMP but it's not working I did it as you said but still not working.
avatar
arijitsen
Member
Member

Age : 21
Posts : 4
Join date : 2013-08-06
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Mati™ on Wed Aug 07, 2013 7:34 am

arijitsen wrote:Sorry for the BUMP but it's not working I did it as you said but still not working.

You need to find class and id for the element you want to show the tips...

add the classes and id to this code.

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'});
          });
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: How to add Tooltips on your forum

Post by Sponsored content


Sponsored content


Back to top Go down

Page 2 of 3 Previous  1, 2, 3  Next

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum