2014-09-18 3 views
2

필자는 요소에 지정된 데이터 속성을 기반으로 툴팁을 표시하려고 노력하면서 절대 위치에 이미지를 배치했습니다. 어떤 이유로 툴팁의 위치는 항상 꺼져 있습니다. 데모를 포함 시켰습니다. 누구든지 문제를 파악할 수 있습니까? 절대 위치 요소 위로 툴팁을 올바르게 배치하는 방법은 무엇입니까?

$("div.thing").each(function (i) { 
 
    var objthis = this; 
 
    $(this).qtip({ 
 
    show: 'click', 
 
    hide: 'click', 
 
    content: { 
 
     text: 'hey' 
 
    }, 
 
    position: { 
 
     corner: { 
 
     tooltip: 'topLeft', 
 
     target: 'topLeft' 
 
     }, 
 
     adjust: { 
 
     x: $(objthis).data('left'), 
 
     y: $(objthis).data('top') 
 
     } 
 
    } 
 
    }); 
 
});
div#container { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: black; 
 
} 
 

 
div.thing { 
 
    position: absolute; 
 
    z-index: 1; 
 
    border: 0; 
 
    height: 10px; 
 
    width: 10px; 
 
    top: 50px; 
 
    left: 20px; 
 
    background-color: red; 
 
}
<link href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script> 
 
<div id="container"> 
 
    <div class="thing" data-top="50" data-left="20"></div> 
 
</div>
qtip 설정에서 모두 offset을 설정하여

+0

몰라,하지만 난 당신의 툴팁 위치 (대신 50-20의 100-40)를 두 배로 생각 (어쩌면 당신은 데이터 상단과 데이터를 제거해야합니다 - HTML에서 왼쪽?) – Hotted24

답변

0

, 당신은 너무 멀리 이미지에서 툴팁을 이동하고 있습니다. 오프셋 제거하십시오 : 도움이된다면

$("div.thing").each(function (i) { 
 
    var objthis = this; 
 
    $(this).qtip({ 
 
    show: 'click', 
 
    hide: 'click', 
 
    content: { 
 
     text: 'hey' 
 
    }, 
 
    position: { 
 
     corner: { 
 
     tooltip: 'topLeft', 
 
     target: 'topLeft' 
 
     }, 
 
    } 
 
    }); 
 
});
div#container { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: black; 
 
} 
 

 
div.thing { 
 
    position: absolute; 
 
    z-index: 1; 
 
    border: 0; 
 
    height: 10px; 
 
    width: 10px; 
 
    top: 50px; 
 
    left: 20px; 
 
    background-color: red; 
 
}
<link href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script> 
 
<div id="container"> 
 
    <div class="thing" data-top="50" data-left="20"></div> 
 
</div>

관련 문제