Is it possible to display MOUSOVER pop-up tip text box to the left (instead of to the right) of the mouse pointer

Question

Hi,

I would like to make it possible for the respondents to see larger version of the tested graphic (if they find some defiles not clear enough at standard graphic). I use mousover function to achieve this, but it turns out in case of graphic located at the very right CBC concept that only about the half the tip text graphic is visible – the other part is outside the window and can not be seen.

Thanks in advance,

Rafał

Answer 1

@Rafal: If you are moderately proficient with javascript, then you ought to consider using a js framework/library like YUI or jQuery to help out with this.  Here is a link to a YUI example that you can build from: http://developer.yahoo.com/yui/examples/container/overlaymanager.html.  The example requires that you press buttons for the pop up; however, in your case you can create span tags around the verbiage that you'd like your tooltip to respond to and then apply event listeners to those tags.

Example HTML:

q1 What sort of <span id='mytooltip'>hamburger</span> do you like? Select one.
- meat
- cheese
- cheese and meat
- meat and cheese
- this burger: http://www.youtube.com/watch?v=ifUJ5--4tjI

Example using YUI and JS for the events:

YAHOO.util.Event.on('mytooltip', 'mousenter', magic); 

function magic(e){
// code to show your tool tip.
}

Here's the benefit:
- you can choose the xy coords
- it's html in the pop up, so you can configure it however you like (graphics, etc)
- very reusable

Answer 2

You can modify the MooTools file we provide for download on the Tool Tips tutorial page (https://www.sawtoothsoftware.com/download/ssiweb/tool_tips/) to do this.  If you open up the ToolTips.js file you can look for this line:

$(this.name + "_text").setStyles({'left': x + 10, 'top': y + 10, 'display': 'block'});
        });

and change the left portion of it to something like

$(this.name + "_text").setStyles({'left': x - 500, 'top': y + 10, 'display': 'block'});
        });

to display the tool tip popup 500 pixels to the left of the mouse.

Comments

+ - 500? it would probably work, but not good suggestion :)

---

Depends on how big the image is

---

I meant

-500

instead of

+-500

(signs) is it a common usage?

---

Ah, yep typo.  I've changed it to just - 500.

---

Let me clarify - it's not image specific, it's location specific, i.e. if the image is on the right side of the screen (which is randomized in the choice task for example) I'd like the mouse-over to show to the left, image on the left I'd like the mouse-over to show to the right etc.