IM.Tooltip // Teste de colisão com selects

daviscabral (Davis Zanetti Cabral) — Mon, 02 Jul 2007 18:08:48 GMT

Um exemplo de uso da função hitTest do site JSFromHell.com.
Implementei com base nela um esquema de Tooltips, baseado em um script que não me recordo onde peguei.

Com isso as selects que estiverem atrás dessa tooltip somem quando ela é mostrada.

Esse esquema transforma atributos title="" de elementos em tooltips.



IM = {}

/* Utils

 ***************************************************************************/

IM.Utils = {

  hitTest: function(o, l){

    function getOffset(o){

      for(var r = {l: o.offsetLeft, t: o.offsetTop, r: o.offsetWidth, b: o.offsetHeight};

        o = o.offsetParent; r.l += o.offsetLeft, r.t += o.offsetTop);

      return r.r += r.l, r.b += r.t, r;

    }

    for(var b, s, r = [], a = getOffset(o), j = isNaN(l.length), i = (j ? l = [l] : l).length; i;

      b = getOffset(l[--i]), (a.l == b.l || (a.l > b.l ? a.l <= b.r : b.l <= a.r))

      && (a.t == b.t || (a.t > b.t ? a.t <= b.b : b.t <= a.b)) && (r[r.length] = l[i]));

    return j ? !!r.length : r;

  },

  setOpacity: function(el, op){

    el.style.filter="alpha(opacity:"+op+")";

    el.style.KHTMLOpacity="0."+op;

    el.style.MozOpacity="0."+op;

    el.style.opacity="0."+op;

  },

  showElement: function(x) { // show element ( object element )

    x.style.display = "block";

    if(!x.ieFix)

        x.ieFix = IM.Utils.hitTest(x, d.getElementsByTagName("select"));

    for(var i = x.ieFix.length; i; x.ieFix[--i].style.visibility = "hidden");

  },

  hideElement: function(x) { // hide element ( object element )

    x.style.display = "none";

    if (x.ieFix)

      for(var i = x.ieFix.length; i; x.ieFix[--i].style.visibility = "visible");

  }

};





/* Tooltip

 ***************************************************************************/

IM.Tooltip = {

  init: function(id) {

    var links,i,h;

    if(!d.getElementById || !d.getElementsByTagName ) return;

    if(!$(id)) return;

    h = IM.DOM.cE("span");

    h.setAttribute("id",'im-tooltip');

    h.style.position="absolute";

    if ( $('im-tooltip') ) Element.remove("im-tooltip");

    d.getElementsByTagName("body")[0].appendChild(h);

    if(id==null) links=d.getElementsByTagName("a");

    else links=($(id)).getElementsByTagName("a");

    for(i=0;i      this.load(links[i]);

    }

  },

  load: function(el) {

    var tooltip,t,b,s,l;

    t=el.getAttribute("title");

    if(t==null || t.length==0) return;

    el.removeAttribute("title");

    tooltip=this.cE("span","tooltip");

    s=this.cE("span","top");

    s.appendChild(d.createTextNode(t));

    tooltip.appendChild(s);

    b=this.cE("b","bottom");

    tooltip.appendChild(b);

    IM.Utils.setOpacity(tooltip, '90');

    el.tooltip=tooltip;

    el.onmouseover=this.sT;

    el.onmouseout=this.hT;

    el.onmousemove=this.pos;

  },

  sT: function(e) { // showTooltip

    var x = $('im-tooltip');

    x.appendChild(this.tooltip);

    IM.Tooltip.pos(e);

  },

  hT: function(e) { // hideTooltip

    var d = $('im-tooltip');

    if(d.childNodes.length>0) d.removeChild(d.childNodes[0]);

    if (d.ieFix)

      for(var i = d.ieFix.length; i; d.ieFix[--i].style.visibility = "visible");

  },

  cE: function(t,c) {

    var x = d.createElement(t);

    x.className = c;

    x.style.display="block";

    return(x);

  },

  pos: function(e) {

    var posx=0,posy=0;

    if(e==null) e=window.event;

    posx = Event.pointerX(e);

    posy = Event.pointerY(e);

    var x = $('im-tooltip');

    x.style.top=(posy+10)+"px";

    x.style.left=(posx-20)+"px";

    if(!x.ieFix)

        x.ieFix = IM.Utils.hitTest(x, d.getElementsByTagName("select"));

    for(var i = x.ieFix.length; i; x.ieFix[--i].style.visibility = "hidden");

  }

}

DZone Snippets: Daviscabral's Code Snippets

IM.Tooltip // Teste de colisão com selects