+ Reply to Thread
Results 1 to 2 of 2

Thread: [HREF TITLES] Forum / Website

  1. #1
    Shield of Telara Jawsnap's Avatar
    Join Date
    Mar 2011
    Posts
    766

    Default [HREF TITLES] Forum / Website

    Trion,

    Just something I'd like to share with you! It's a nifty HREF Title design. It's fully controllable, and XHTML Valid.

    Javascript/jQuery
    Code:
    (function($){
      jQuery.fn.mbTooltip = function (options){
        return this.each (function () {
          this.options = {
            live:true,
            opacity : .9,
            wait:2000,
            timePerWord:70,
            cssClass:"default",
            hasArrow:true,
            imgPath:"images/",
            hasShadow:true,
            shadowColor:"black",
            shadowLeft:1,
            anchor:"mouse", //"parent",
            shadowTop:1,
            mb_fade:200
          };
          $.extend (this.options, options);
          if (this.options.live)$("[title]").live("mouseover",function(){$(this).mbTooltip(options);});
          var ttEl=$(this).is("[title]")? $(this): $(this).find("[title]");
          var wait=this.options.wait;
          var hasShadow=this.options.hasShadow;
          var fade=this.options.mb_fade;
          var myOptions=this.options;
          $(ttEl).each(function(){
    
    /* //DISABLED - don't like this. Maybe... I dunno.
            $(this).hover(function(){
              $(this).css("cursor","help");
            },function(){
              $(this).css("cursor","default");
            });
    */
            $(this).attr("tooltip", $(this).attr("title"));
            $(this).removeAttr("title");
            $(this).attr("tooltipEnable","true");
            var theEl=$(this);
            var ttCont= theEl.attr("tooltip");
            var hover=$.browser.msie?"mouseenter":"mouseover";
            $(this).bind(hover,function(e){
              if (myOptions.anchor=="mouse") $(document).mb_getXY();
              $(this).one("mouseout",function(){
                $(this).stopTime();
                $(this).deleteTooltip(hasShadow,fade);
              }).one("click",function(){
                $(this).stopTime();
                $(this).deleteTooltip(hasShadow,fade);
              });
              $(this).oneTime(wait, function() {
                if ($(this).attr("tooltipEnable")=="true")
                  $(this).buildTooltip(ttCont,myOptions,e);
              });
            });
          });
        });
      };
    
      var mbX = 0;
      var mbY = 0;
    
      $.fn.extend({
        mb_getXY:function(){
          $(document).bind("mousemove", function(e) {
            mbX = e.pageX;
            mbY = e.pageY;
          });
          return {x:mbX,y:mbY};
        },
        buildTooltip: function(cont,options){
          this.options={};
          $.extend (this.options, options);
          var parent=$(this);
          $("body").append("<div id='tooltip'></div>");
          var imgUrl=this.options.imgPath+"up.png";
          $("#tooltip").html(cont);
          $("#tooltip").addClass(this.options.cssClass);
          if (this.options.hasArrow){
            $("#tooltip").prepend("<img id='ttimg' src='"+imgUrl+"'>");
            $("#ttimg").css({
              position:"absolute",
              opacity:.5
            });
    
            $("#ttimg").addClass("top");
          }
          $("#tooltip").css({
            position:"absolute",
            top:  this.options.anchor=="mouse"?$(document).mb_getXY().y +7:parent.offset().top+(parent.outerHeight()),
            left:this.options.anchor=="mouse"?$(document).mb_getXY().x+7:parent.offset().left,
            opacity:0
          });
    
          $("#tooltip").findBestPos(parent,this.options.imgPath,this.options.anchor);
          if (this.options.anchor=="mouse") $(document).unbind("mousemove");
          if (this.options.hasShadow) {
            $("#tooltip").dropShadow({left: this.options.shadowLeft, top: this.options.shadowTop, blur: 2, opacity: 0.3, color:this.options.shadowColor});
            $(".dropShadow").css("display","none");
            $(".dropShadow").mb_bringToFront();
            $(".dropShadow").fadeIn(this.options.mb_fade);
          }
          $("#tooltip").mb_bringToFront();
          $("#tooltip").fadeTo(this.options.mb_fade,this.options.opacity,function(){});
          var timetoshow=3000+cont.length*this.options.timePerWord;
          var hasShadow=this.options.hasShadow;
          var fade=this.options.mb_fade;
          $(this).oneTime(timetoshow,function(){$(this).deleteTooltip(hasShadow,fade);});
        },
        deleteTooltip: function(hasShadow,fade){
          var sel=hasShadow?"#tooltip,.dropShadow":"#tooltip";
          $(sel).fadeOut(fade,function(){$(sel).remove();});
        },
        findBestPos:function(parent,imgPath,anchor){
          var theEl=$(this);
          var ww= $(window).width()+$(window).scrollLeft();
          var wh= $(window).height()+$(window).scrollTop();
          var w=theEl.outerWidth();
          theEl.css({width:w});
          var t=((theEl.offset().top+theEl.outerHeight(true))>wh)? theEl.offset().top-(anchor!="mouse"? parent.outerHeight():0)-theEl.outerHeight()-20 : theEl.offset().top;
          t=t<0?0:t;
          var l=((theEl.offset().left+w)>ww-5) ? theEl.offset().left-(w-(anchor!="mouse"?parent.outerWidth():0)) : theEl.offset().left;
          l=l<0?0:l;
          if (theEl.offset().top+theEl.outerHeight(true)>wh){
            $("#ttimg").attr("src",imgPath+"bottom.png");
            $("#ttimg").removeClass("top").addClass("bottom");
          }
          theEl.css({width:w, top:t, left:l});
        },
        disableTooltip:function(){
          $(this).find("[tooltip]").attr("tooltipEnable","false");
        },
        enableTooltip:function(){
          $(this).find("[tooltip]").attr("tooltipEnable","true");
        }
      });
    
      jQuery.fn.mb_bringToFront= function(){
        var zi=10;
        $('*').each(function() {
          if($(this).css("position")=="absolute"){
            var cur = parseInt($(this).css('zIndex'));
            zi = cur > zi ? parseInt($(this).css('zIndex')) : zi;
          }
        });
        $(this).css('zIndex',zi+=100);
      };
    
      $(function(){
        //due to a problem of getter/setter for select
        $("select[title]").each(function(){
          var selectSpan=$("<span></span>");
          selectSpan.attr("title",$(this).attr("title"));
          $(this).wrapAll(selectSpan);
          $(this).removeAttr("title");
        });
      });
    
    })(jQuery);
    CSS
    Code:
    #tooltip.default{
        width:auto;
        max-width:400px;
        min-width:40px;
        border:1px solid;
        border:1px solid #ececec;
        background: #3B437A;
        color: #FFFFFF;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border-radius:3px; 
        margin-top:2px;
        margin-top:4px;
        padding:5px;
        font-size:14px;
        font-family: Arial;
    }
    jQuery -- Place this in the Header Script tag. Being VBulletin software, the HEAD is included throughout the page, you'll only need this once, in the header template file. I've commented each part so you know what it does.
    Code:
    <script type="text/javascript">
       $(function(){
          $("[title]").mbTooltip({ // also $([domElement]).mbTooltip  >>  in this case only children element are involved
             opacity : .87,   //opacity of the title background.
    	 wait: 300,   //Milliseconds to wait before showing.
    	 cssClass: "default",   // default = default class, you can modify this per page should you wish.
    	 timePerWord: 100,   //time to show in milliseconds per word
    	 hasArrow: false,   // if you whant a little arrow on the corner - can be quite nice in some places.
    	 hasShadow: true,   //true - Shows title shadow. false - No title shadow.
    	 imgPath:"images/", //Path to images incase of adding IMAGE BACKGROUND.
             ancor:"mouse", //"parent"  you can ancor the tooltip to the mouse position or at the bottom of the parent element.
    	 shadowColor: "black", //Yeah... you can even choose this. BOSS.
    	 mb_fade:300 //Milliseconds that it takes to fade the element in.
          });
       });
    </script>
    With this code. You can turn attachment number 1 (default tooltips) in to attachment number 2 (sexy tooltips!).

    Also, the code works on ALL devices. Even on touch events from iPhones/iPads/Andorid Tablets/Phones etc etc.
    Attached Thumbnails Attached Thumbnails [HREF TITLES] Forum / Website-screen-shot-2012-12-03-13.14.01.png  
    Attached Images  

  2. #2
    Shield of Telara Jawsnap's Avatar
    Join Date
    Mar 2011
    Posts
    766

    Default

    Oh yeah, I wanted to also mention - they're fully HTML and PHP Compatible tooltips. You can even place images inside them - database entries, php variables, the lot.

    If you specify to do so, you can actually feed an entire iframe'd website into them.

+ Reply to Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts