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应用程序。