I am using asp.net mvc with dynamic knockout columns. One of the column headers, "Status", should have a bootstrap popover in which a user can click a font-icon question mark and be provided with a popover containing information about the column:
<script type="text/html" id="statusHead">
<th scope="col" class="nowrap" data-bind="css: cellClass, visible: visible">
<a href="#" id="toolTipFiles" data-bind="bootstrapPopover: {
html: true,
placement: 'left',
trigger: 'focus',
content: [
'<ul class=' fa-ul'>',
'<li><i class='fa-li fa fa-lg fa-circle status-red'></i>Red: File will be deleted within this quarter.</li>',
'<li><i class='fa-li fa fa-lg fa-adjust status-yellow'></i>Yellow: File will be deleted next quarter.</li>',
'<li><i class='fa-li fa fa-lg fa-circle-o status-green'></i>Green: File will be deleted in more than one quarter.</li>',
'<li><i class='fa-li fa fa-lg fa-exclamation status-black'></i>Black: Exception has been submitted but not yet approved or denied.</li>',
'</ul>'
].join(''),
title: '<center><b>'Status' indicates when the file will be deleted</b></center>'
}" data-content="">
<i class="fa fa-question-circle"></i>
</a>
</th> </script>
Visual Studio doesn't like this syntax and I get the following errors:
1.near data-bind: "If this attribute value is enclosed in quotation marks, the quotation marks must match"
- near
'<ul class=':"missing attribute name"
I believe all my quotations match, so I'm not sure what the issue is. I've tried switching double quotes to single and single to double but when this happens the popover simply never opens.
