Javascript 复杂的HTML工具提示（存储）-架构建议_Javascript_Html_Ruby On Rails_Mootools_Tooltip

Javascript 复杂的HTML工具提示（存储）-架构建议

javascript html ruby-on-rails

Javascript 复杂的HTML工具提示（存储）-架构建议,javascript,html,ruby-on-rails,mootools,tooltip,Javascript,Html,Ruby On Rails,Mootools,Tooltip,我正在开发一个复杂的页面，其中包含一些小部件、一些“可拖动”元素和一个交互式时间线问题：在可以拖动的元素（实体）上，我必须显示一个工具提示，其中包含有关该特定元素的一些高级信息（实体页面的“预览”）可拖动项（我认为约为100个）以这种方式表示（其中一些是通过友好方式创建的）：我在考虑3种可能的解决方案：在mouseover（第一个）上，发出ajax请求，返回特定的工具提示HTML，将其插入工具提示包装器中，显示它，然后在mouseout上隐藏它在mouseover（第一个）上，发

我正在开发一个复杂的页面，其中包含一些小部件、一些“可拖动”元素和一个交互式时间线

问题：

在可以拖动的元素（实体）上，我必须显示一个工具提示，其中包含有关该特定元素的一些高级信息（实体页面的“预览”）

可拖动项（我认为约为100个）以这种方式表示（其中一些是通过友好方式创建的）：

我在考虑3种可能的解决方案：

在
```
mouseover
```
（第一个）上，发出ajax请求，返回特定的工具提示HTML，将其插入工具提示包装器中，显示它，然后在
```
mouseout
```
上隐藏它
在
```
mouseover
```
（第一个）上，发出一个ajax请求，返回一个json，通过js（mustache）呈现它，将它插入工具提示包装器中，显示它，然后在
```
mouseout
```
上隐藏它
直接在元素内部呈现工具提示，并将其打开
```
mouseover
```
/
```
mouseout
```

css/布局/定位不是大问题，也是因为我已经创建了一个工具提示mootools插件模型（如果你对一些伟大的可定制mootools工具提示插件有任何建议，请告诉我：）

我只需要一个提示/建议，说明如何实施这个高级“工具提示”系统，或者您是否有更好的解决方案可以向我建议。：）

谢谢大家

p、我正在使用rails3（以及haml、scss、compass）和mootools作为js框架（+mustache作为模板系统）开发web应用程序。

你不能真的选择一种方法，而不是另一种方法，因为它首先要满足你的一些业务需求

你需要问自己的问题是：

搜索引擎优化重要吗

如果是：

重要的是不要将内容放在正文中，因为它不相关或不独特，可能会影响你的关键词密度，并给谷歌、然后是AJAX留下关于页面真实内容的错误印象
重要的是要在谷歌的身体看到，然后在一个隐藏的元素渲染

我有一种感觉，你的应用程序将不会需要太多，但这是一个有效的点

DOM和“性能重要吗”

如果是（您已经使用画布…100+拖拽物…）

您将有多少（是否太多？）节点具有工具提示（额外的dom节点）？太多了使用ajax/事件委派
每页工具提示很少：仍然可以预呈现以保存额外请求
添加所有提示事件的示意图，委托
等待XHR
```
onComplete时出现延迟
```
？预渲染

网络/请求

如果使用ajax，则需要找到一种方法来尽量减少可能的请求数量，尤其是在可以一次又一次地触发相同的工具提示的情况下。这意味着：

在页面上本地缓存请求结果，并在从服务器请求之前首先检查缓存

至于操作方法，我知道您完全有能力编写实际代码，所以祝您好运：）

根据我的经验，我将两者结合起来。每次页面加载时缓存经常更改但不经常更改的库存信息。使用情况/大小信息、表单帮助程序等不会更改本地存储中的i缓存。具有明显SEO价值的工具提示位于正文中

<!-- ... -->
<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>
<!-- ... -->

<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>