Trouble with Flot for Wordpress Tooltip plugin

Question

I'm trying to enable tooltips for Flot for Wordpress and am having problems with it when I add in a certain function and I need this to work from what I've tried to decipher onnline.

I downloaded the latest version of tooltips for flot charts and loaded the script when the plugin is loaded.

The chart I have create loads perfect when the following js code is not in the code or when the function is empty like below too.

Can anyone tell me what's wrong with the code that is stopping my chart appearing?

Cheers in advance, Alan.

This is code I believe I need to make the tooltips work

 function showTooltip(x, y, contents) {
        $("<div id="tooltip">" + contents + "</div>").css({
            position: "absolute",
            display: "none",
            top: y + 5,
            left: x + 20,
            border: "2px solid #4572A7",
            padding: "2px",     
            size: "10",   
            "background-color": "#fff",
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

This is what works when I remove the inside of the code

function showTooltip(x, y, contents) {
        position: "absolute"
}

Here full code below:

echo ' <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/jquery.flot.resize.js"></script>
<script language="javascript" type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/excanvas.min.js"></script>
<link href="' . plugins_url( $path ) . '/flot-for-wp/flot/layout.css" rel="stylesheet" type="text/css">
<div id="placeholder" style="width:95%; height:85%; max-width:100%; margin:auto;"></div>
';
echo '
<script language="javascript" type="text/javascript" id="source">


var lie_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_lie'] . '],';
}
echo ' ];

var options_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_options'] . '],';
}
echo ' ];

var context_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_context'] . '],';
}
echo ' ];

var decide_results = [ ';
foreach($chartdata as $row){
echo '[' .$row['mentalerrors_date'] . ',' .$row['mentalerrors_decide'] . '],';
}
echo ' ];


var dataset = [
    {
        label: "Lie",
        data: lie_results
    },  {
        label: "Context",
        data: context_results
    }, {
        label: "Options",
        data: options_results
    },{
        label: "Decide",
        data: decide_results
    }
];


var options = {
    xaxis: { mode: "time", tickSize: [2, "month"] },
    yaxes: [{ min: ' .$min_count . ', max: ' .$max_count . ' },{},{},{}],
    points: { show: true, symbol: "circle", fill: true },
    lines: { show: true, },
    legend: { noColumns: 0, labelFormatter: function (label, series) { return "<font color=\"white\">" + label + "</font>";}, backgroundColor: "#000", backgroundOpacity: 0.9, labelBoxBorderColor: "#000000", position: "nw"},
    grid: { hoverable: true, mouseActiveRadius: 8 }
};


jQuery(document).ready(function($){
var placeholder = $("#placeholder");
var plot = $.plot(placeholder,dataset,options);
$("#placeholder").UseTooltip();
}
);


var previousPoint = null;

$.fn.UseTooltip = function () {
    $(this).bind("plothover", function (event, pos, item) {                         
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();

                var x = item.datapoint[0];
                var y = item.datapoint[1];                

                console.log(x+","+y)

                showTooltip(item.pageX, item.pageY,
                  x + "<br>" + "<strong>" + y + "</strong> (" + item.series.label + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
};

function showTooltip(x, y, contents) {
        $("<div id=\'tooltip\'>" + contents + "</div>").css({
            position: "absolute",
            display: "none",
            top: y + 5,
            left: x + 20,
            border: "2px solid #4572A7",
            padding: "2px",     
            size: "8",   
            opacity: 0.85,
            background: "#4572A7",
        }).appendTo("body").fadeIn(200);
    };




</script></div>';

Answer 1

When using javascript, get in the habit of checking the debugger console for errors. This is invalid javascript:

$("<div id="tooltip">" + contents + "</div>")

It produces:

SyntaxError: Unexpected identifier

Why? Because it's not properly quoted.

Try:

"<div id=\"tooltip\">" + contents + "</div>"

The quotes around tooltip are escaped.