2011-09-29 6 views
1

또는 Tooltip2 또는 Tooltip3 같은 단어를 마우스로 입력 할 때와 마찬가지로 .mousemove으로 동적 jQuery 툴팁을 만들 수 있습니다. 여기 jquery 툴팁을 동적으로 만들기

는 내 HTML의 샘플입니다 : 나는 당신이 제시 방법을 완전히 확실하지 않다 http://jsfiddle.net/JGx52/4/

<ul> 
    <li class="style"> 
    <div class="tooltip" style="bottom: 406px; left: 565px; opacity: 0.9; display: none; "> 
     Simple or Rich A simple call such as $("img[title]").tooltip(); will enable tooltips by taking advantage of the element's title attribute. If you want complex tooltips with images, tables, forms and links that's possible by placing the tooltip element manually next to the trigger element. Configure design, timing and positioning Use CSS to create rounded borders, arrows, gradients or shadows. Big or small, high or low. Use the configuration to tweak pre and post-delays and positioning to your personal needs. Fading, sliding, dynamic Tooltip comes with two built-in effects: toggle, and fade and one separate effect, slide, and you can easily build your own effects. The dynamic plugin will dynamically change the tooltip's position so that it always stays in the viewport. File size: 1.10 Kb This tool has all the features and configuration options you'll possibly need, such as effect and a plugin framework, scripting API and an event model. A smaller codebase is easier to control and results in snappier behaviour. Without gzipping the size is 3.5 Kb. 
    </div> 
    <a href="" class="tool_tip" title="">ToolTip1</a></li> 
    <li class="style"> 
    <div class="tooltip"> 
     jQuery Lint (edge) 
    </div> 
    <a href="" class="tool_tip" title="">ToolTip2</a></li> 
    <li class="style"> 
    <div class="tooltip"> 
     Please read the documentation. For updates please follow our blog, tweets or become a fan. 
    </div> 
    <a href="" class="tool_tip" title="">ToolTip3</a></li> 
</ul> 
+0

....하고 싶습니다. 툴팁 1 등을 가리키면 보여줍니다. 툴팁 1 등? – albert

+0

맞습니다. 어때? (플러그인으로 사용하고 싶지 않습니다.) –

답변

0

만 제공 CSS 마크 업, this works과 :

$('a.tool_tip').hover(function() { 
    $(this).prev('.tooltip').show(); 
}, function() { 
    $(this).prev('.tooltip').hide(); 
}); 
+0

나는 이것을 원하지만 그것은 내 CSS와 HTML에서 사실로 작동하지 않는다. http://jsfiddle.net/JGx52/5/ –

0

전 이것이 당신이 찾고있는 것이라고 생각하십시오 http://jsfiddle.net/jalbertbowdenii/QGTTN/10/

+0

내 코드에서 작동하지 않는다. http://jsfiddle.net/JGx52/5/ –

+0

i 그게 무슨 뜻인지 실마리가 없어. 하지만 여기에 귀하의 코드입니다 http://jsfiddle.net/jalbertbowdenii/JGx52/6/ – albert

+0

아니,이 날 도울 수 없어요. (내 CSS를 변경하지 마십시오) –