Я разрабатываю сложную страницу, содержащую некоторые виджеты, некоторые «перетаскиваемые» элементы и интерактивную временную шкалу <canvas>.Сложные подсказки HTML (хранилище) - предложение архитектуры
Проблема:
На mouseover - на элементах, которые могут быть втянуты (юридические лица) - я должен отобразить всплывающую подсказку, содержащую некоторые дополнительные данные (а «предварительный просмотр» из-страницы объекта) о этот конкретный элемент.
перетаскиваемую элементы (я думаю, что они ~ 100) представлены таким образом (некоторые из них созданы динамически):
<!-- ... -->
<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>
I t t hinking около 3 возможных решений:
- На
mouseover(на первом) сделать AJAX запрос, который возвращает определенную подсказку HTML, инъекционный его в всплывающей-обертке, показать его и наmouseoutскрыть. - На
mouseover, (на первом), сделайте запрос ajax, который возвращает json, визуализирует его js (усы), вводит его внутри всплывающей подсказки, показывает его и наmouseoutскрыть его. - Рендер подсказке непосредственно внутри элемента, и переключить его на
mouseover/mouseout
CSS-код/макет/позиционирование не является большой проблемой, и потому, что я уже создал подсказку MooTools плагин макет (если У вас есть предложения о некоторых великолепных настраиваемых плагинах подсказок mootools, пожалуйста, дайте мне знать :)).
Мне просто нужен совет/предложение о том, каким образом следовать этой расширенной системе подсказок или если у вас есть лучшие решения, предлагающие мне. :)
Спасибо всем
P.S. Я разрабатываю веб-приложение с помощью rails3 (и haml, scss, compass) и mootools как js framework (+ усы как система шаблонов).