[You must be registered and logged in to see this link.]




Ok so the other day someone asked me through PM on here how to create the LGBB pop up Tool Tip Feature. Well as you all know LGBB is of course AvacWebs code, so I am not going to get into too much detail about that except the code to add to the BBcode section. I have this code exactly as is on my website and it is punBB, this can work for phpbb2 as well as the other two. This code should work for Invision and phpbb3 if you follow the LGBB code correctly.




AvacWebs LGBB CODE MUST BE IMPLEMENTED FOR THIS ADD ON TO WORK! FOLLOW HIS TUTORIAL HERE!
[You must be registered and logged in to see this link.]




Step 1:
Add this to the LGBB code

Code:

LGBB.add('tips', {
    close : true,
    replacement : '<a class="tooltip2" href="" title="{ATTR}">{CONTENT}</a>'
});

Step Two:
We have to create mod tools so what I did first was go to the ACP>MODULES>WIDGETS and activated the widgets management. Then I created a new widget 
Title= Mod Tools
Use table type= No
Widget title= blank

Code:


<div id="mod_controls">
<span class="mod_title">Mod tools</span>
<button class="button2" data-helix="[compreq]" type="button">Completed Request</button>
<button class="modButton">Tooltip</button>
<div id="tool_wrapper" style="display:none;">
<span class="aa">Tip: <input class="input_mod" id="tip_tip" type="text"/></span><br />
<span class="bb">Text: <input class="input_mod" id="text_tip" type="text" /></span>
<div><input type="submit" class="modbutton" id="sub_tip" /></div>
</div>
</div>

This is a simple code.
We have our container the buttons after that, our inner container for the pop up and the html that lays inside that. Save this widget




Now add the widget to either side left or right and save that as well.
Now on where you new widget is there should be a button for permissions, uncheck all except Admin and Moderators.




*If widgets are not activated please activate them and place this inside CSS

Code:

#left,#right{display:none;}

Step 3:
Now to style this

Code:

#mod_controls{margin-bottom: 10px;float:left;}
#tool_wrapper{position: absolute;border: 3px solid #414641;border-radius: 5px;background: #548B54;width: 200px;height: 90px;margin-left: 25%;margin-top:5px;}
#tool_wrapper .aa {padding-left:10px;}
#tool_wrapper .bb {padding-left:2px;}
#tool_wrapper .bb input,#tool_wrapper .aa input{width:160px;}
#tool_wrapper div{text-align:Center;}


Step 4:
Now on to all the jQuery.

Code:


$(function(){
$('#text_edit').append('<div id="mod_tools"></div>');
$('#mod_controls').appendTo('#mod_tools');
    $('#mod_controls .button2').each(function(){
        var helix = $(this).attr('data-helix');
$(this).click(function(){
    var text = $('#text_editor_textarea');
    text.val(text.val()+helix);
});
    });
});
$(function(){
var showHide =$('#tool_wrapper');
var button = $('.modButton');
button.click(function(e){
e.preventDefault();
showHide.toggle();
});
$('#sub_tip').click(function(e){
e.preventDefault();
var a = $('#tip_tip').val();
var b = $('#text_tip').val();
var text = $('#text_editor_textarea');
  text.val(text.val()+'[tips='+a+']'+b+'[/tips]');
$('#tip_tip').val('');
$('#text_tip').val('');
});
$('a.tooltip2,a.tooltip3,a.clickTip').click(function(e){
e.preventDefault();
});
});


Step 5:
Next the Tooltip Section

Code:


/*
  jQuery Version:            jQuery 1.3.2+
  Plugin Name:            aToolTip V 1.5
  Plugin by:                Ara Abcarians: http://ara-abcarians.com
  License:              aToolTip is licensed under a Creative Commons Attribution 3.0 Unported License
                        Read more about this license at --> http://creativecommons.org/licenses/by/3.0/        
*/
(function($) {
    $.fn.aToolTip = function(options) {
      /**
          setup default settings
      */
      var defaults = {
          // no need to change/override
          closeTipBtn: 'aToolTipCloseBtn',
          toolTipId: 'aToolTip',
          // ok to override
          fixed: false,
          clickIt: false,
          inSpeed: 200,
          outSpeed: 100,
          tipContent: '',
          toolTipClass: 'defaultTheme',
          xOffset: 5,
          yOffset: 5,
          onShow: null,
          onHide: null
      },
      // This makes it so the users custom options overrides the default ones
      settings = $.extend({}, defaults, options);
    
      return this.each(function() {
        var obj = $(this);
        /**
            Decide weather to use a title attr as the tooltip content
        */
        if(obj.attr('title')){
            // set the tooltip content/text to be the obj title attribute
            var tipContent = obj.attr('title');    
        } else {
            // if no title attribute set it to the tipContent option in settings
            var tipContent = settings.tipContent;
        }




        /**
            Build the markup for aToolTip
        */
        var buildaToolTip = function(){
            $('body').append("<div id='"+settings.toolTipId+"' class='"+settings.toolTipClass+"'><p class='aToolTipContent'>"+tipContent+"</p></div>");




            if(tipContent && settings.clickIt){
              $('#'+settings.toolTipId+' p.aToolTipContent')
              .append("<a id='"+settings.closeTipBtn+"' href='#' alt='close'>close</a>");
            }
        },
        /**
            Position aToolTip
        */
        positionaToolTip = function(){
            $('#'+settings.toolTipId).css({
              top: (obj.offset().top - $('#'+settings.toolTipId).outerHeight() - settings.yOffset) + 'px',
              left: (obj.offset().left + obj.outerWidth() + settings.xOffset) + 'px'
            })
            .stop().fadeIn(settings.inSpeed, function(){
              if ($.isFunction(settings.onShow)){
                  settings.onShow(obj);
              }
            });            
        },
        /**
            Remove aToolTip
        */
        removeaToolTip = function(){
            // Fade out
            $('#'+settings.toolTipId).stop().fadeOut(settings.outSpeed, function(){
                $(this).remove();
                if($.isFunction(settings.onHide)){
                  settings.onHide(obj);
              }
            });            
        };




        /**
            Decide what kind of tooltips to display
        */
        // Regular aToolTip
        if(tipContent && !settings.clickIt){  
            // Activate on hover  
            obj.hover(function(){
              // remove already existing tooltip
              $('#'+settings.toolTipId).remove();
              obj.attr({title: ''});
              buildaToolTip();
              positionaToolTip();
            }, function(){ 
              removeaToolTip();
            });  
          }          




          // Click activated aToolTip
          if(tipContent && settings.clickIt){
            // Activate on click  
            obj.click(function(el){
              // remove already existing tooltip
              $('#'+settings.toolTipId).remove();
              obj.attr({title: ''});
              buildaToolTip();
              positionaToolTip();
              // Click to close tooltip
              $('#'+settings.closeTipBtn).click(function(){
                  removeaToolTip();
                  return false;
              });      
              return false;        
            });
          }




          // Follow mouse if enabled
          if(!settings.fixed && !settings.clickIt){
            obj.mousemove(function(el){
              $('#'+settings.toolTipId).css({
                  top: (el.pageY - $('#'+settings.toolTipId).outerHeight() - settings.yOffset),
                  left: (el.pageX + settings.xOffset)
              });
            });        
        }          




      }); // END: return this
    };
})(jQuery);
// initiate the plugin after DOM has loaded  
$(function(){  
    // basic usage  
    $('a.fixedTip').aToolTip();  
    // fixed tooltip  
    $('a.tooltip1').aToolTip({  
        fixed: true ,
});
// on click tooltip with custom content  
    $('a.clickTip').aToolTip({  
        clickIt: true,
    });  
});


You can either have a fixed tooltip or a moving tooltip try both out by changing the the LGBB code I gave, the replacement:a class="tooltip2" href="" title="{ATTR}">{CONTENT}




Step 6:
Then add this CSS to your CSS style sheet

Code:


/* 
   Required Styles
*/
#aToolTip {
   position: absolute;
   display: none;
   z-index: 999;
}




   #aToolTip .aToolTipContent {
      position:relative;
      margin:0;
      padding:0;
   }
/* 
   END: Required Styles
*/
/**
   Default Theme
*/
.defaultTheme {
   border:2px solid #444;
   background:#555;
   color:#fff;
   margin:0;
   padding:6px 12px;   




   -moz-border-radius: 12px 12px 12px 0;
   -webkit-border-radius: 12px 12px 12px 0;
   -khtml-border-radius: 12px 12px 12px 0;
   border-radius: 12px 12px 12px 0;




   -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
   -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
   box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
}




   .defaultTheme #aToolTipCloseBtn {
      display:block;
      height:18px;
      width:18px;
      background:url("http://i79.servimg.com/u/f79/17/83/35/07/closeb10.png")no-repeat;
      text-indent:-9999px;
      outline:none;
      position:absolute;
      top:-20px;
      right:-30px;
      margin:2px;
      padding:4px;
   }

now you are 100% done.


Remember AvacWeb LGBB code can be supported [You must be registered and logged in to see this link.] and I do not own any rights of this. This is to help whoever wants to use this as either 1 the tooltip like it is but you can rearrange this code to make it work with other LGBB codes


Support for the rest of this is accepted by posting below and I will help whenever I am here