HTML hints (storage) - architecture proposal

Question

I am developing a complex page that contains some widgets, some drag-and-drop elements, and an interactive <canvas> timeline.

---

Problem:

In mouseover - on elements that can be dragged (entities) - I have to display a tooltip containing some additional information ("preview" the entity page) about this particular element.

Draggable elements (I think they are ~ 100) are represented in this way (some of them are created dynamically):

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

where .tooltip-wrapper initially set to display:none and opacity:0

A general tooltip is a kind of complex HTML code containing some details, i.e. (simplified batch)

 <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 think of three possible solutions:

• In mouseover (on the first), execute an ajax request that returns a specific HTML tooltip, enters it inside the tooltip, shows it and hides it on mouseout .
• In mouseover (on the first), create an ajax request that returns json, draw it js (mustache), enter it inside the tooltip, show it and mouseout it on mouseout .
• Display a tooltip directly inside the element and switch it to mouseover / mouseout

Css / layout / positioning is not a big issue, also because I already created a mootools tooltip layout (if you have any suggestions about some custom mootools tooltip plugins, please let me know :)).

I just need some advice / suggestion on how to follow this embedded “hint” or if you have the best solutions offering me. :)

Thank you all

---

ps I am developing a web application using rails3 (and haml, scss, compass) and mootools as a js framework (+ mustache as a template system).

Answer 1

you cannot take one method and select it on top of another without covering some of your business requirements.

questions you need to ask yourself:

---

SEO is important

If yes:

• it is important NOT to have content in the body, since it does not matter or is unique, it can affect the density of your keyword and give a misconception about the actual content of the page for google, then AJAX
• important to have in the body for viewing google and then render in a hidden element

I have a feeling that your application does not require much, but this is a valid point.

---

DOM and Performance Matters

if yes (you are already using canvas ... 100+ draggables ...)

• How many (too many?) Nodes will you have hints (additional dom-nodes)? Lots of? go with ajax / event delegation
• several tooltips per page: you can still pre-render to save additional requests.
• Trail of adding all tip events, delegate !
• delay while waiting for XHR onComplete undesirable? pre render!

---

Network / Inquiries

if you are following the ajax route, you need to specify a way to minimize the number of requests, especially if the same tooltips can be run again and again. it means:

• query caching results locally on the page and checking the cache first before requesting it from the server.
• If your data is not dynamic / real, consider that even by clicking on localStorage under some key / db id, this will be saved to reload the page, go and return visitors.

as for practical use, I know that you are quite capable of making real code so successful :)

from my experience, I make a mixture of both. which often changes, but not often cached on every page load. information about usage / sizes, shapes, etc. that don’t change the cache I have in localStorage. tooltips that have obvious SEO implications are in the body.