The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Tool Tip for forumotion.

View previous topic View next topic Go down

Tool Tip for forumotion.

Post by luiz1877 on Sat Jan 11, 2014 9:14 pm

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 http://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?

luiz1877
Forumember

Male Posts : 155
Reputation : 2
Language : English | Portuguese

http://everyonesblog.net

Back to top Go down

Re: Tool Tip for forumotion.

Post by Mati on Sun Jan 12, 2014 3:25 am


Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Re: Tool Tip for forumotion.

Post by luiz1877 on Sun Jan 12, 2014 12:37 pm

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

luiz1877
Forumember

Male Posts : 155
Reputation : 2
Language : English | Portuguese

http://everyonesblog.net

Back to top Go down

Re: Tool Tip for forumotion.

Post by SLGray on Sun Jan 12, 2014 1:36 pm

@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.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35665
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: Tool Tip for forumotion.

Post by Mati on Sun Jan 12, 2014 3:13 pm

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

Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Re: Tool Tip for forumotion.

Post by luiz1877 on Thu Jan 16, 2014 9:01 pm

??? 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"

luiz1877
Forumember

Male Posts : 155
Reputation : 2
Language : English | Portuguese

http://everyonesblog.net

Back to top Go down

Re: Tool Tip for forumotion.

Post by SLGray on Thu Jan 16, 2014 9:20 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35665
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: Tool Tip for forumotion.

Post by luiz1877 on Thu Jan 16, 2014 9:57 pm

So do i add this to javasript?

luiz1877
Forumember

Male Posts : 155
Reputation : 2
Language : English | Portuguese

http://everyonesblog.net

Back to top Go down

Re: Tool Tip for forumotion.

Post by SLGray on Thu Jan 16, 2014 11:11 pm

Correct


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35665
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: Tool Tip for forumotion.

Post by luiz1877 on Thu Jan 16, 2014 11:30 pm

Not working...

luiz1877
Forumember

Male Posts : 155
Reputation : 2
Language : English | Portuguese

http://everyonesblog.net

Back to top Go down

Re: Tool Tip for forumotion.

Post by SLGray on Thu Jan 16, 2014 11:32 pm

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?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35665
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: Tool Tip for forumotion.

Post by luiz1877 on Fri Jan 17, 2014 6:41 pm

No, i only added:


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

luiz1877
Forumember

Male Posts : 155
Reputation : 2
Language : English | Portuguese

http://everyonesblog.net

Back to top Go down

Re: Tool Tip for forumotion.

Post by SLGray on Fri Jan 17, 2014 6:45 pm

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

There are three steps.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35665
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: Tool Tip for forumotion.

Post by luiz1877 on Fri Jan 17, 2014 6:51 pm

Those 3 steps +



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

Right?

luiz1877
Forumember

Male Posts : 155
Reputation : 2
Language : English | Portuguese

http://everyonesblog.net

Back to top Go down

Re: Tool Tip for forumotion.

Post by SLGray on Fri Jan 17, 2014 6:52 pm

That is the second step.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35665
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: Tool Tip for forumotion.

Post by Luffy on Fri Jan 17, 2014 7:13 pm

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.






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

View previous topic View next topic Back to top


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