cloudstack/ui/scripts/ui/widgets/toolTip.js

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.
(function($,cloudStack) {
  $.widget("cloudStack.toolTip", {
    _init: function(args) {
      var context = this.options.context;
      var dataProvider = this.options.dataProvider;
      var actions = this.options.actions;
      var docID = this.options.docID;
      var text = cloudStack.docs[docID].desc;
      var $text = $('<p>').html(text).appendTo($tooltip);
      var $tooltip = $('<div>').addClass('tooltip-box');
      var $text = $('<p>').html(text).appendTo($tooltip);
      var $container = $('#cloudStack3-container');
      $tooltip.appendTo($container);

      if (this.options.mode == 'hover'){
        $(this.element).hover(hoverHandler,outHandler);
      } else if (this.options.mode == 'focus'){
        $(this.element).focus(hoverHandler);
        $(this.element).blur(outHandler);
      } else if (this.options.mode == 'manual'){}

      $(this.element).data('$tooltip', $tooltip);

      // Add arrow
      $tooltip.append($('<div></div>').addClass('arrow'));

      $tooltip.hide();
    },

    show: function(){
      var o = this.options;

      if(o.mode=='manual'){
        prepare(this.element,o);
      }

      $(o.toolTip).show();
    },

    hide: function(){
      var o = this.options;
      $(o.toolTip).hide();
    }
  });

  $.extend($.cloudStack.toolTip, {
    defaults: {
      toolTip: '',
      onShow: function(sender){
        //Flipping arrow and text

        var $tooltip = $('.tooltip-box');

        //Switch styles based on how close to viewport border

        if($(window).width()-sender.target.offset().left <= $tooltip.width()) {

          $('.tooltiptextleft',$tooltip).removeClass('tooltiptextleft').addClass('tooltiptextright');
          $('.tooltiparrowleft',$tooltip).removeClass('tooltiparrowleft').addClass('tooltiparrowright');

        }
        else{
          $('.tooltiptextright',$tooltip).removeClass('tooltiptextright').addClass('tooltiptextleft');
          $('.tooltiparrowright',$tooltip).removeClass('tooltiparrowright').addClass('tooltiparrowleft');
        }

      },
      onHide: undefined,
      mode: 'hover',
      // provide a speed for the animation
      speed: 1000,
      // provide a period for the popup to keep showing
      period: 2000,
      // default the animation algorithm to the basic slide
      animation:'slide'
    },
    animations: {
      slide: function(e, options) {

      },
      fade: function(e, options) {

      }
    }
  });

  function hoverHandler(event)
  {
    //Fetch Options
    var o = $.data(this,'toolTip').options;

    //Element who raised the event
    var $this = $(this);

    //Helper functon for Positioning and Calling Callback function
    prepare($this,o);

    //Call Show method of the tooltip Widget,
    //Show method should play on any required animations
    $.data(this,'$tooltip').show();
  };
  function outHandler(event)
  {
    //Fetch Options
    var o = $.data(this,'toolTip').options;

    //Get tooptip Element
    var $tooltip =  $(o.toolTip);

    //If call back method defined, initiate the call
    if($.data(this,'toolTip').options.onHide){
      $.data(this,'toolTip').options.onHide.call(this, {target:$(this)});
    }

    //Call Hide method of the tooltip Widget,
    //Hide method should play on any required animations
    $.data(this,'$tooltip').hide();
  };
  function prepare(jObj, options)
  {
    var $tooltip =  $(options.tooltip);
    var element = jObj[0];
    var offset = jObj.offset();

    var left = offset.left + jObj.width();
    var top = offset.top-5;

    if(options.onShow){
      options.onShow.call(this, {target:jObj});
    }

    if($(window).width()-offset.left <= $tooltip.width()) {
      left = offset.left - $tooltip.width();
    }
    else{
      left += 35;
    }
    $tooltip.css({position:'absolute', top:top+'px', left:left+'px'});

    // Fix overlay
    setTimeout(function() {
      $('.tooltip-box').zIndex($(':ui-dialog').zIndex() + 1);  });

  };


})(jQuery,cloudStack);