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.

Problem with tooltip and forum title

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

Solved Problem with tooltip and forum title

Post by darki on July 25th 2015, 10:14 am

First topic message reminder :

Hi,

I use tooltip in my forum, here the codes:
Spoiler:
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);
Spoiler:
Code:
$(document).ready(function(){
      $(function() {
        $('a').tipsy({fade: true, gravity: 's'});
        $('.i_icon_quote').tipsy({fade: true, gravity: 's'});
        $('.i_icon_edit').tipsy({fade: true, gravity: 's'});
        $('.i_icon_delete').tipsy({fade: true, gravity: 's'});
        $('.i_icon_ip').tipsy({fade: true, gravity: 's'});
        $('.i_icon_profile').tipsy({fade: true, gravity: 's'});
        $('.i_icon_pm').tipsy({fade: true, gravity: 's'});
        $('.topic-title').tipsy({fade: true, gravity: 's'});
        $('.i_post').tipsy({fade: true, gravity: 's'});
        $('.i_reply').tipsy({fade: true, gravity: 's'});
      });
    });
CSS:
Code:

.tipsy {
padding: 5px;
font-size: 11px;
position: absolute;
text-shadow: none;
z-index: 999;
}
 
.tipsy-inner {
padding: 8px 8px 8px 8px;
background-color: #12A3EB;
color: white;
font-weight: 700;
max-width: 200px;
text-align: center;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
background: black url(http://cuul.tk/img/gradient.png) repeat-x 0 -150px;
}
 
.tipsy-inner {
border-radius: 3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
 
.tipsy-arrow {
position: absolute;
background: url('http://cuul.tk/img/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;
}

My problem in forums, where I use e.g. the following as name/title of forum (so that tooltip appears)

<a class="forumtitle" href="/f33-" title="OFF-Topic-Bereich des Schiggysboards">OFF-Topic</a>

is that:


Does anyone has an idea how to change the title/name, so that the problem in picture above won't appear?

Thanks in advance!


Last edited by darki on September 6th 2015, 12:45 pm; edited 3 times in total

darki
Forumember

Posts : 254
Reputation : 10
Language : German, english

http://schiggysboard.com

Back to top Go down


Solved Re: Problem with tooltip and forum title

Post by darki on August 26th 2015, 7:34 pm

bump
Anyone an idea?

darki
Forumember

Posts : 254
Reputation : 10
Language : German, english

http://schiggysboard.com

Back to top Go down

Solved Re: Problem with tooltip and forum title

Post by darki on September 5th 2015, 7:10 pm

bump

darki
Forumember

Posts : 254
Reputation : 10
Language : German, english

http://schiggysboard.com

Back to top Go down

Solved Re: Problem with tooltip and forum title

Post by Ange Tuteur on September 6th 2015, 11:55 am

Hi @darki,

I apologize for the delay. Anyway, when you post this code as the title :
Code:
<a class="forumtitle" href="/f33-" title="OFF-Topic-Bereich des Schiggysboards">OFF-Topic</a>

It creates a second block correct ? This is because you're creating a link inside a link, browsers are picky about that so it gives you the result of two links in the page-title. In short; it's not a problem caused by tipsy tooltips.

Since you're using a class name in your link you should use the following CSS based on what you're attempting.

If you're doing this for all page titles use these rules :
Code:
h1.page-title a { display:none }
h1.page-title a.forumtitle { display:block }

otherwise use this rule instead which simply hides the empty links.
Code:
h1.page-title a:empty { display:none }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Problem with tooltip and forum title

Post by darki on September 6th 2015, 12:05 pm

Thank you, @Ange Tuteur, you are a genius! It works great! Love

Now I have a last small problem (which is not so important Very Happy). In "Who is online?" page will the forums with the code for the title you quoted appear in bold.
How to solve that? :s

darki
Forumember

Posts : 254
Reputation : 10
Language : German, english

http://schiggysboard.com

Back to top Go down

Solved Re: Problem with tooltip and forum title

Post by Ange Tuteur on September 6th 2015, 12:36 pm

You want any forums that appear here to have a bold font-weight, correct ? If so, this should work :
Code:
.forumbg .table1 a[href^="/f"] {
  font-weight:bold;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Problem with tooltip and forum title

Post by darki on September 6th 2015, 12:44 pm

Nearly. Very Happy Forums which have this title
Code:
<a class="forumtitle" href="/f33-" title="OFF-Topic-Bereich des Schiggysboards">OFF-Topic</a>
appear here with a bold font-weight. So I don't want that, because it's unnormally.

But your piece of CSS is what I need. I only changed the font-weight to 'normal'.
Thank you, Ange. Smile Problem solved.

darki
Forumember

Posts : 254
Reputation : 10
Language : German, english

http://schiggysboard.com

Back to top Go down

Solved Re: Problem with tooltip and forum title

Post by Ange Tuteur on September 6th 2015, 12:50 pm

Oooh, I misread. Mr. Green

You're welcome, and sorry again for the long wait.

Topic archived

Have a good day. ^^

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top


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