Looking in to this the tooltip position issue was due to Firefox not supporting innerText. What you need to use is textContent instead which is considered the standard by the W3C. If you change all of your innerText calls to textContent then the tooltip shows in the correct position with the formatting that you want on the date and Vol fields. Essentially what was happening is that a JavaScript error was getting thrown in your tooltipShown event and prevented the rest of the logic from executing.

As for formatting the rest of the numbers, you can modify your tooltipShown event to call toFixed(2) and update the labels. All together your event handler would look like the following:

tooltipShown: function (evt, ui) {
    var labels = ui.element.find("label");
    for (var i = 0; i < labels.length; i++) {
        var labelStart = labels[i].textContent.slice(0, -1);

        if (labelStart === "Vol") {
            var divVol = $(labels[i]).parent();
            var labelMarkup = "<label style='width: 45px; font-weight: bold;'>Vol:</label> ";
            $(divVol).empty().html(labelMarkup + ui.item["Volume"].toLocaleString());
        }
        else if (labelStart === "Date") {
            var divEl = $(labels[i]).parent();

            var labelMarkup = "<label style='width: 45px; font-weight: bold;'>Date:</label> ";
            var month = ui.item[labelStart].toDateTime().getMonth() + 1;
            var date = ui.item[labelStart].toDateTime().getDate();
            var year = ui.item[labelStart].toDateTime().getFullYear().toString().substr(2, 2);

            $(divEl).empty().html(labelMarkup + month + "/" + date + "/" + year);
        }
        else {
            var divVal = $(labels[i]).parent();

            var labelMarkup = "<label style='width: 45px; font-weight: bold;'>" + labelStart + ":</label> ";
            var formattedNumber = ui.item[labelStart].toFixed(2);

            $(divVal).empty().html(labelMarkup + formattedNumber);
        }
    }
},

I've attached a modified version of your sample so you can see these changes there.

As for the wrapping issue, is that occurring in a specific browser? I have not been able to reproduce that behavior. What are the steps that I need to follow to get that behavior?

Hello Sufyan,

I'm currently looking in to the first issue with Firefox to determine what is going on with the positioning of the tooltip.

As for the second issue it is important to note that the tooltips use the data as it is in the data source. To have the tooltip render with your formatting you'll need to override the value like you are doing with the date and the volume.

As for the appearance, the best approach would be to create a tooltipTemplate and then specify the exact CSS styling you want applied. You could set the color to whatever value you want and then control transparency through the use of the opacity CSS setting. Or, if you prefer you can use a background-color as an rgba value that would give you a similar effect.

I will keep looking in to the Firefox issue and will have another update for you by the end of the business day tomorrow. If you have any questions or concerns for me in the meantime please let me know.