Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

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

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ł
asked Dec 5, 2011 by anonymous

2 Answers

+1 vote
@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
answered Dec 5, 2011 by Ryan Bronze (695 points)
edited Dec 5, 2011 by Ryan
0 votes
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.
answered Dec 5, 2011 by Brian McEwan Gold Sawtooth Software, Inc. (38,315 points)
edited Dec 7, 2011 by Brian McEwan
+ - 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.
...