How to add a style definition to a tooltip html string definition?

Question

I'm appending a Bootstrap tooltip to a label in a HTML form. So far the tooltip shows up fine in the render.

But now have the case where a style needs to be added to the <tr> tag within the HTML string supplied for that tooltip.

I did try adding the style definition as normal to the tag below, but syntax errors are thrown stating a bracket and ; are needed:

$('#Event').tooltip({title: "<tr style="padding-bottom: 4px;" ><td><code>Current</code></td><td>Event is still active</td></tr>", html: true, placement: "right"});

Question:

What is the correct syntax to style a html string in a tooltip?

Answer 1

Strings in JS is delimited by pairs of matching quotes. For example:

var validStr1 = "hello";
var validStr2 = 'hello';
var validStr3 = "he'l'lo";
var validStr4 = 'he"""llo';
var invalidStr1 = "hello';
var invalidStr2 = "hel"lo";
var invalidStr1 = "hel"'lo';

You are using string as an argument for tooltip function, hence you have to use single and double quotes in code here properly.

$('#Event').tooltip({title: '<tr style="padding-bottom: 4px;" ><td><code>Current</code></td><td>Event is still active</td></tr>', html: true, placement: "right"});