use JS variable inside jQuery .css() call to specify the name of CSS property

Question

Trying to do some logic to ensure tooltips show within the viewable area. How can I use my flot_position variable within my .css() shown below?

//tooltip stuff
function showTooltip(x, y, contents) {

    var window_width = $( window ).width();
    if( x > (window_width - 60) )
    {
        var flot_position = 'right';
    }
    else
    {
        var flot_position = 'left';
    }


    $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            flot_position: x + 15, // This doesn't set 'left' or 'right' to x+15
            border: '1px solid #333',
            padding: '4px',
            color: '#fff',
            'border-radius': '3px',
            'background-color': '#333',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
}

@DavidThomas: It won't work as written, it adds a property called flot_position, not a property called left or right. The error would be that the tooltip doesn't end up in the right place. — T.J. Crowder
– T.J. Crowder, Commented Jul 13, 2014 at 10:06
@DavidThomas to add on T.J's comment, it will result in invalid css.. — Amit Joki
– Amit Joki, Commented Jul 13, 2014 at 10:07
@T.J.Crowder: for some reason that surprises me, though having read your answer I think it's something I already had trouble with, once. Thanks! — David Thomas
– David Thomas, Commented Jul 13, 2014 at 10:10

Community · Accepted Answer · 2017-05-23 11:50:19Z

You have two options:

Call the css(propertyName, propertyValue) version as shown by Amit in his answer.

$('<div id="tooltip">' + contents + '</div>').css({
    position: 'absolute',
    display: 'none',
    top: y + 5,
    border: '1px solid #333',
    padding: '4px',
    color: '#fff',
    'border-radius': '3px',
    'background-color': '#333',
    opacity: 0.80
}).css(flot_position, x + 15)
.appendTo("body").fadeIn(200);

Create the options object in advance, then add to it, and use it:

var cssOptions = {
    position: 'absolute',
    display: 'none',
    top: y + 5,
    border: '1px solid #333',
    padding: '4px',
    color: '#fff',
    'border-radius': '3px',
    'background-color': '#333',
    opacity: 0.80
};
cssOptions[flot_position] = x + 15;
$('<div id="tooltip">' + contents + '</div>').css(cssOptions).appendTo("body").fadeIn(200);

The second option works because although you can't use a variable name on the left-hand side of the property initializer in an object initializer, you can use a variable name with brackets notation after the initializer to add the property. In JavaScript you can access (get/set) a property on an object with dotted notation and a literal property name (obj.foo), and with bracketed notation and a string property name (obj["foo"]). In the bracketed notation, the string can be the result of any expression, including a variable lookup.

Amit Joki · Accepted Answer · 2014-07-13 09:59:55Z

2

You can do this:

$('<div id="tooltip">' + contents + '</div>').css({
    position: 'absolute',
    display: 'none',
    top: y + 5,
    border: '1px solid #333',
    padding: '4px',
    color: '#fff',
    'border-radius': '3px',
    'background-color': '#333',
    opacity: 0.80
}).css(flot_position, x + 15) // use chaining and use .css(key,value) overload
.appendTo("body").fadeIn(200);

answered Jul 13, 2014 at 9:59

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Collectives™ on Stack Overflow

use JS variable inside jQuery .css() call to specify the name of CSS property

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related