Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Solved] Tooltip on Topic Title Help



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Udarsha45

avatar
Punbb Rookie
Punbb Rookie
  • Description:
How can I do this?

  • Information:
Forum:http://www.bleachstory.net/Version:PUNBB
Type:Request a codeTags:Tooltip,Topic,Title

Powered by PunBB
Currently 0 users have thanked Udarsha45 for this post:

2
Offline

  Shadow

avatar
Administrator
Administrator

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

3
Offline

  Udarsha45

avatar
Punbb Rookie
Punbb Rookie
Sadly, its not working for me... :/

Powered by PunBB
Currently 0 users have thanked Udarsha45 for this post:

4
Offline

  Shadow

avatar
Administrator
Administrator
@Udarsha45, you may try this out:

Step 1
Placement: All pages
Code:
[panda=js]        // 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
Create new javascript, sample Placement
Code:
[panda=js]        $(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'});
              });
            });
Step 3
Put this in your 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; }

This tutorial is provided by Matti, so hopefully it works for you.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

5
Offline

  Udarsha45

avatar
Punbb Rookie
Punbb Rookie
Okay, I added it. What should I add to the tipsy to appear? Smile

Powered by PunBB
Currently 0 users have thanked Udarsha45 for this post:

6
Offline

  Shadow

avatar
Administrator
Administrator
If you added it tooltip should appear when you mouseover the topic title.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

7
Offline

  Udarsha45

avatar
Punbb Rookie
Punbb Rookie
thank you. Smile

solved.

Powered by PunBB
Currently 0 users have thanked Udarsha45 for this post:

8
Offline

  cloud02

avatar
★Moderator★
★Moderator★
[sucesso="Marked as Solved"]The question(s) in this topic have been answered and the owner has been able to solve the problem. Because of this, the topic has been marked as Solved.
If you have further questions, please open a new topic.[/sucesso]

Powered by PunBB
Currently 0 users have thanked cloud02 for this post:

9
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

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