# Positioning a tooltip relative to various kinds of elements

I am trying to simplify the following massive conditional statement but have no idea how to. Does anyone have suggestions for it?

//regular elements use the normal position variables.
var tooltipXPos = xPos;
var tooltipYPos = yPos-$tooltipElement.height()-YOffset; //individual elements position shifting... //for sub_link on top if ($element.is('#uilder') || $element.is('#options')) { tooltipYPos = yPos + 35; } //expend button after do search in Search page if ($element.is('#extend')) {
tooltipXPos = xPos - 240;
}
if ($element.is('#lis')) { tooltipXPos = xPos - 295; tooltipYPos = yPos - 80; } if ($element.is('#count')) {
tooltipXPos = xPos + 180;
tooltipYPos = yPos - 90;
}
if ($element.is('label')) { tooltipXPos = xPos + 80; tooltipYPos = yPos - 90; } if ($element.is('#add')) {
tooltipXPos = xPos -280;
tooltipYPos = yPos -120;
}

if ($element.is('title_label')) { tooltipXPos = xPos + 35; tooltipYPos = yPos -75; } //assign homework by class button under homework tab.. if ($element.is('#control')) {
tooltipXPos = xPos -270;
}

//place the tutorial window
$tooltipElement.css({ position: 'absolute', top: tooltipYPos, left: tooltipXPos, 'z-index': 9999 })  • Problem is, it's not a massive conditional. It's just a lot of individual conditionals. Could use a switch I guess... – danwellman Aug 24 '12 at 15:57 • Flagged as an nearly exact duplicate of the closed stackoverflow.com/questions/12096001/… – Silox Aug 24 '12 at 15:58 ## 4 Answers Create an array which contains : • the id of element • the offset x • the offset y then, loop on each element of this array and do a single if. Something like that (not tested) var items = [ {name: '#te_classbuilder', x: -120, y: -0}, {name: '#lesson-details-extend-button', x: 0, y: 120}, {name: 'label', x: 100, y: -120} ]; for (var i = 0; i < items.length; i++) { var item = items[i]; if ($element.is(items[i].name) {
tooltipXPos = xPos + item.x;
tooltipYPos = yPos + item.y;
}
}


If you know the key, use a map and don't use a loop in the array, simply get the item of the map using the key.

You could make an id-to-position map first:

 var offsetMap = {
"lesson-details-extend-button":
{ y: 35 },
"te_classbuilder":
{ x: -240 },
{ x: -295, y: -80 },
// etc...
};


Then assign the values:

var offset = offsetMap[$element.attr('id')]; if (offset.y) tooltipYPos=yPos + offset.y; if (offset.x) tooltipXPos=xPos + offset.x;  I would use an object. Since it seems you are switching off the individual ids of each element, I would set the ids as keys. var positions = { '#te_classbuilder': {x: 100, y: 120}, }  To get the x,y of an element, find the keyname by the id attribute of the element: var obj = positions[$element.attr("id")]


DRY and get rid of those "Magic Numbers". As in:

tooltipXPos = xPos + 180;
tooltipYPos = yPos - 90;


Things like magic numbers will break your design and your code over time. Also, people coming into your code later won't know how or why you used those. It would be complete trial and error. Your code and design should be robust and pure enough to avoid having to use static numbers to increment xy coords.

As it is, you really can't avoid using a lot of conditional statements, especially without seeing what you're moving around. But you could wrap in a function and use id and coords as arugments. Example

function moveElements(id, x, y, offsetX, offsetY) {
tooltipXPos = x + offsetX;
tooltipYPos = y - offsetY;
}

if ( \$element.is('#someid', moveElements(id, x, y, offsetX, offsetY) )