4
我正在開發一個複雜的頁面，其中包含一些小部件，一些'可拖動'元素和一個<canvas>交互式時間表。複雜的HTML工具提示（存儲） - 體系結構建議
問題：
在mouseover - 上的元素，可以拖動（實體） - ，我要顯示包含一些先進的信息有關的工具提示（實體頁的「預覽」）該特定元素。
可拖動的項目（我認爲他們〜100）以這種方式來表示（其中有些是dinamically創建）：
<!-- ... -->
<div id="entity-1" class="draggable">
<div class="title">title</div>
<img src="#URL" alt="..." />
<div class="tooltip-wrapper"></div>
</div>
<div id="entity-2" class="draggable">
<div class="title">title</div>
<img src="#URL" alt="..." />
<div class="tooltip-wrapper"></div>
</div>
<div id="entity-3" class="draggable">
<div class="title">title</div>
<img src="#URL" alt="..." />
<div class="tooltip-wrapper"></div>
</div>
<!-- ... -->
其中.tooltip-wrapper初始設置爲display:none和opacity:0
一一般工具提示是含有一些細節，即一個有點複雜HTML（很多簡化）
<div class="tooltip-entity-wrapper">
<div class="title">entity title</div>
<div class="tab"><!-- tab content --></div>
<div class="tab"><!-- tab content --></div>
<div class="tab"><!-- tab content --></div>
<form action="...">
<!-- form content -->
</form>
<a href="#URL"><!-- full entity page link --></a>
</div>
我噸邏輯思維能力約3可能的解決方案：
- 在
mouseover，（在第一個）使返回特定的提示HTML Ajax請求，注入它的提示，包裝裏面，拿出來和mouseout隱藏它。 - 在
mouseover上，（第一個）發出一個ajax請求，返回一個json，通過js（mustache）呈現它，將其注入到工具提示包裝中，顯示它並在mouseout上隱藏它。 - 直接渲染工具提示的元素中，並切換它
mouseover/mouseout
的CSS /佈局/定位是不是一個大問題，也是因爲我已經創建了一個工具提示mootools的插件樣機（如果u有關於一些偉大的定製mootools的工具提示插件任何建議，請讓我知道:)）。
我只是需要遵循實施這一先進的「工具提示」系統，或者你有更好的解決方案，建議我哪條路小費/建議。 :)
謝謝大家
附：我正在開發使用Rails3中（和HAML，SCSS，指南針），並作爲mootools的JS框架（+鬍子的模板系統）的Web應用程序。