Question

I’m developing a complicated page containing some widgets, some ‘draggable’ elements and a <canvas> interactive timeline.

---

Problem:

On mouseover – on elements that can be dragged (entities) -, I have to display a tooltip containing some advanced info (a ‘preview’ of an entity page) about that particular element.

The draggable items (I think they are ~ 100) are represented in this way (some of them are created 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>
<!-- ... -->

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

A general tooltip is a kinda complicated HTML containing some details i.e. (lot simplified)

<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’m thinking about 3 possible solutions:

• On mouseover, (on first one) make an ajax request that returns the particular tooltip HTML, inject it inside the tooltip-wrapper, show it and on mouseout hide it.
• On mouseover, (on first one) make an ajax request that returns a json, render it by js (mustache), inject it inside the tooltip-wrapper, show it and on mouseout hide it.
• Render the tooltip directly inside an element, and toggle it on mouseover/mouseout

The css/layout/positioning is not a big problem, also because I’ve already created a tooltip mootools plugin mockup (if u have any suggestion about some great customizable mootools tooltip plugins, please let me know 🙂 ).

I just need a tip/suggestion on which way to follow to implement this advanced ‘tooltip’ system or if you have better solutions to suggest me. 🙂

Thanks everyone

---

p.s. I’m developing the web app using rails3 (and haml, scss, compass) and mootools as js framework (+ mustache as templating system).

Answer 1

you can’t really take one method and pick it over the other w/o covering some of your business requirements first.

the questions you need to ask yourself are:

---

is SEO important

if yes:

• important NOT to have the content in the body as it’s not relevant or unique, may affect your keyword density and give the wrong impression about the real content of the page to google, then AJAX
• important TO have in the body for google to see, then render in a hidden element

I have a feeling your app won’t require much of that but it’s a valid point.

---

DOM and “is performance important”

if yes (you already use canvas… 100+ draggables…)

• how many (is too many?) nodes are you going to have that have tooltips (extra dom nodes)? too many? go with ajax / event delegation
• few tooltips per page: can still pre-render it to save the extra request(s)
• footprint of adding all the tip events, delegate!
• delay while waiting for XHR onComplete undesirable? pre-render!

---

Network / requests

if you go the ajax route, you need to figure a way to minimize the number of requests possible, especially if the same tooltips can be triggered again and again. this means:

• caching request results locally on page and checking against cache first before requesting it from the server
• if your data is not dynamic / real time, consider even pushing to localStorage under some key / db id, this will survive page reload, transition and return visitors.

as for the how-to, I know you are perfectly capable of doing the actual code so good luck 🙂

from my experience, I do a mix of both. stock information that changes often but not that often is cached per page load. usage/sizing info, form helpers etc that don’t change i cache in localStorage instead. tooltips that have an obvious SEO value are in the body.