• 목록

• 페이스북 공유
• 트위터 공유

//summary2015_Tooltip기능(좌우 개선)

$("dl.tt>dt").hover(

function(e){

//변수정의

var DD = $(this).next();

var docW = $("body").width();

var w = $("#area_all").first().width();

var dtW = $(this).width();

var ddW = $(DD).width();

if(700 <= w && ddW > 350) { 

//피시최대폭 350

ddW = 350;

$(DD).css({"width":"350px","white-space":"normal"});

}else{

//모바일 최대폭에 맞춤

if(ddW > (w-40)) {

ddW = (w-40);

$(DD).css({"width":ddW+"px","white-space":"normal"});

}else{

$(DD).css({"width":"auto","white-space":"nowrap"});

}

}

var wGap = 0; //도큐멘트폭이 클때 적용치

if(docW>w) wGap = (docW-w)/2;

var top = (parseInt($(DD).css("height"),10)+10) * -1;

var x = e.clientX-wGap; //단어기준 마우스위치

var per = x/w;

var offsetX = e.offsetX; //단어기준 적용치

var leftPX = (x-10-offsetX )*-1; //툴팁 left위치 

var rightPX = ( (ddW/2)-((w-x)/2)  ) *-1; //툴팁 right위치

//풍선말 위치설정

if(per<0.5) { //좌측맞춤

$(DD).css({"float":"left","width":(ddW+10)+"px","right":"auto", "white-space":"pre-wrap"});

if( leftPX > -(ddW/2) ){

//console.log("left_1"); 

$(DD).css({"left":leftPX+"px"});

}

/*else if( (w+leftPX)-30 < ddW ) { //모바일 시..

console.log("left_2"); 

$(DD).css({"width":(w+leftPX-Math.ceil(x)+offsetX)+"px"});

}*/

else { 

//console.log("left_3"); 

$(DD).css({"left":-((ddW-dtW)/2)+"px",});

}

}else { //우측맞춤

$(DD).css({"float":"right","width":(ddW+10)+"px","left":"auto","white-space":"pre-wrap"});

if( (w-40)<=ddW ){

if(  leftPX > -(ddW/2) ) { 

console.log("right_1"); 

$(DD).css({"right":-((ddW-dtW)/2)+"px"}); 

}else{

$(DD).css({"right":(rightPX)+"px"});

console.log("right_2"); 

}

}

/*

else if( (w+rightPX)<ddW) { 

console.log("right_2"); 

$(DD).css({"width":(w+rightPX+30)+"px", "right":(rightPX+dtW)+"px"}); 

}*/

else { 

console.log("right_3"); 

$(DD).css({"right":-((ddW-dtW)/2)+"px"});  

}

}

top = (parseInt($(this).next().css("height"),10)+10) * -1;

$(DD).css("top", top+"px").fadeIn("fast");

//툴팁테스트

var testerStr = "docW:"+docW;

testerStr +=", wGap:"+wGap;

testerStr +=", dtW:"+dtW;

testerStr +=", "+this.nextSibling.tagName+":"+$(DD).width();

testerStr +=", ddW:"+ddW;

//testerStr +=", "+this.nextSibling.firstChild.tagName+":"+$(this).next().children().first().width();

//testerStr +=", "+this.nextSibling.firstChild.tagName+":"+$(this.nextSibling.firstChild).width();

testerStr +=", w:"+w;

testerStr +=", x:"+x;

testerStr +=", offsetX:"+offsetX;

testerStr +=", per:"+per;

testerStr +=", leftPX:"+leftPX;

testerStr +=", rightPX:"+rightPX;

$("body").before("<div id='info' style='position:fixed; top:0; z-index:99999; background-color:white;'>"+testerStr+"</div>");

},

function(){

//$(this).next().css({"width":"auto"});

$(this).next().fadeOut("fast");

//$(this).next().css("display","inline-block");

$("#info").remove();

//$(this).next().first().css("width",saveW+"px");

}

);