Hi

Hmm... I've been having a problem with a specific script in my forum. If you can see here: http://tfpbl.forumtl.com/

Hovering over the titles would have a customized hover menu. I know the problem is not within the Javascript, but within the CSS but I'm so fed up in searching for the answer, lol, that's why I came to ask for help... even though I really didn't wanna, sorry =x .

I won't hand out my CSS here since it's a part of the skin I'll be uploading in 4 months so when you want to help me, please make sure you know the answer as I will private message you my CSS =x.

http://ygoda.forumtl.com/ <-- My forum that has the problem.

In my CSS, I removed this already which I first thought was the one causing the problem:

Code:

.pun a:hover {   
  color: #873232; 
  text-decoration: none;
}
.pun a:link { 
  color: #E61010; 
  text-decoration: none;
}
.pun a:visited {   
  color: #E61010;
}
.pun a:active { 
  color: #E61010;
}

But still, nothing came up >.> and I still have the problem. Please help~

Regards,
Pizza Boi

Try removing max-width:100px from .tipsy-inner. If you limit the width, then the content inside will overflow if that width is exceeded. You could also probably increase that limit and add word-wrap:break-word.

Hi

Thanks, Ange, but that's not what I meant. Compare the link from the second and first, when you check the "Recent Topic Widget" and hover on a title, a black high box appear in the test forum, right? While on the actual forum, it doesn't and that's where my problem lies in. I'll do the max-width thing, I forgot to edit that part out, lol.

Regards,
Pizza Boi

You weren't clear in your first post on what the problem was, so I looked for anything broken.  

I'd check your script as the original title is blanck :

Code:

<a href="/t24-ygoda-version-i-available-features#68" original-title=""></a>

Hi

That's odd . I'm using the same script for both sites and even tried removing the #main..title code I have :s .

Ce script:

Code:

(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: true,
        fallback: '',
        gravity: 'n',
        html: true,
        live: true,
        offset: 5,
        opacity: 1.0,
        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);

$(document).ready(function(){
  $(function() {
    $('a').tipsy({gravity: 'se', delayIn: 100, delayOut: 300, fade: true});

 
  });
});

Regards,
Pizza Boi

If you set 'scrolling' to 'no' on the recent topics widget, it removes the title attribute. The title attribute is only present when 'scrolling' is set to 'yes'.

Hi

I don't want to have the scrolling action because it's hard to read topics, so how would you re-write this portion? :

Code:

  $.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';
    };

Regards,
Pizza Boi

I don't know, what are you wanting ?

If you want to remove the scrolling and keep the title you could probably do this :

Code:

$(function() {
    var rt = document.getElementById('comments_scroll_container');
                
    var div = document.createElement('DIV');
    div.innerHTML = rt.innerHTML;
                
    rt.parentNode.insertBefore(div, rt);
    rt.parentNode.removeChild(rt);
});

Hi

Sorry if I did not make myself clear. Anyway, the thing I want is for the script to adapt to not scrolling since in the modules, I want it to keep no scrolling .

Edit: The code didn't work, forgot to mention e.e"

Regards,
Pizza Boi

Well it isn't exactly the scripts fault. As I previously mentioned if scrolling is set to no it removes the title attribute from the links, because of this the script can no longer find its title content. If there is no title content there is no tooltip.

For removing the scrolling for punbb, try this script :

Code:

var checkInt = setInterval('checkRecent()',500);
function checkRecent() {
    if ($('#comments_scroll_container a').length) {
        replaceRecent();
        clearInterval(checkInt);
    }
};

function replaceRecent() {
    $('#comments_scroll_div').html($('#comments_scroll_container').html());
    $('#comments_scroll_div').removeAttr('id');
};

I'm not sure if this will work though. When looking over the tipsy code it looked like it doesn't bind events for new elements.

Hi

Yeah, just checked and did a couple of revision in the script yesterday and CSS. The one you gave me didn't work ^ That one above, but I guess the only way for this to work is to re-write it again from scratch, lol.

Anyway, thanks Ange, but I'd like to have this topic locked now .

Regards,
Pizza Boi

If you want something that actually binds a tooltip to links with a title you can work from this quick script I wrote :

Code:

$(document).on('mouseover', 'a', function(e) {
    var x = e.clientX - 15;
    var y = e.clientY - 40;
    tooltip_title = $(this).attr('title');
    if (tooltip_title == '' || tooltip_title === undefined) return;
    $(this).attr('title','');
    $('body').append('<div class="tooltip" style="position:fixed;z-index:99999;left:' + x + 'px;top:' + y + 'px;">' + tooltip_title + '</div>');
});
    
$(document).on('mouseout', 'a', function() {
    $('.tooltip').remove();
    $(this).attr('title',tooltip_title);
});

CSS :

Code:

.tooltip {
    color:#333;
    background:#FFF;
    border:1px solid #CCC;
    -webkit-border-radius:4px;
       -moz-border-radius:4px;
            border-radius:4px;
    -webkit-box-shadow:1px 2px 10px -6px #000;
       -moz-box-shadow:1px 2px 10px -6px #000;
            box-shadow:1px 2px 10px -6px #000;
    padding:3px;
}

Topic locked as requested