I am using lightly adapted Suckerfish menus to provide a (1-deep) tooltip solution. It is working fine in most senses, and seems like the right solution. However, while I want all the checkboxes on the screenshot below to align to the left of the screen, they are instead staggered. An obvious guess (to me) is that I left out a close tag, but inspection of my JSX source and Chrome's inspector looks balanced as far as I can discern.
The screenshot is:
The source has:
var individual_checkbox = (
<ul data-marker="1" className="inline has-tooltip">
<li className="has-tooltip">
<input type="checkbox" name={'hide-' + day.year + '-' +
(day.month + 1) + '-' + day.date + '.' +
id_lookup[JSON.stringify(activity)]}
id={'hide-' + day.year + '-' + (day.month + 1) + '-' +
day.date + '.' + id_lookup[JSON.stringify(activity)]}
onChange={that.hide_instance}
className="hide-instance" />
<ul className="tooltip">
<li className="tooltip">
Done.
</li>
</ul>
</li>
</ul>
);
if (activity.hasOwnProperty('frequency')) {
var series_checkbox = (
<ul data-marker="2" className="inline has-tooltip">
<li className="has-tooltip">
<input type="checkbox" name={'hide.' +
id_lookup[JSON.stringify(activity)]}
onChange={that.hide_series}
className="hide-series" />
<ul className="tooltip">
<li className="tooltip">
Cancel this whole series.
</li>
</ul>
</li>
</ul>
);
} else {
var series_checkbox = '';
}
// console.log('Reached here!');
// console.log(this.state.entries);
if (activity.all_day) {
rendered_activities.push(<li
data-marker="3">{individual_checkbox}
{series_checkbox} <span
dangerouslySetInnerHTML={{__html:
converter.makeHtml(activity.description)
.replace('<p>', '').replace('</p>', '')}}
/></li>);
} else if (activity.minutes) {
rendered_activities.push(<li
data-maker="4">{individual_checkbox}
{series_checkbox} <span
dangerouslySetInnerHTML={{__html:
hour_options[activity.hours][1] + ':' +
minute_options[activity.minutes][1] + ' ' +
converter.makeHtml(activity.description)
.replace('<p>', '').replace('</p>', '')}}
/></li>);
} else {
if (activity.description) {
var description = converter.makeHtml(activity.description
).replace('<p>', '').replace('</p>', '');
} else {
var description = '';
}
rendered_activities.push(<li
data-marker="5">{individual_checkbox}
{series_checkbox} <span
dangerouslySetInnerHTML={{__html:
hour_options[activity.hours][1] + ' ' +
description}} /></li>);
}
The rendered HTML, pretty-printed, is:
<ul class="activities" data-reactid=".0.3.3:2">
<li data-marker="3" data-reactid=".0.3.3:2.0">
<ul class="inline has-tooltip" data-marker="1" data-reactid=
".0.3.3:2.0.0">
<li class="has-tooltip" data-reactid=".0.3.3:2.0.0.0">
<input class="hide-instance" data-reactid=
".0.3.3:2.0.0.0.0" id="hide-2015-9-18.2" name=
"hide-2015-9-18.2" type="checkbox" />
<ul class="tooltip" data-reactid=".0.3.3:2.0.0.0.1">
<li class="tooltip" data-reactid=".0.3.3:2.0.0.0.1.0">
Done.</li>
</ul>
</li>
</ul><span data-reactid=".0.3.3:2.0.1"></span> <span data-reactid=
".0.3.3:2.0.2"></span><span data-reactid=".0.3.3:2.0.3">Test
2.</span>
</li>
<li data-marker="3" data-reactid=".0.3.3:2.1">
<ul class="inline has-tooltip" data-marker="1" data-reactid=
".0.3.3:2.1.0">
<li class="has-tooltip" data-reactid=".0.3.3:2.1.0.0">
<input class="hide-instance" data-reactid=
".0.3.3:2.1.0.0.0" id="hide-2015-9-18.2" name=
"hide-2015-9-18.2" type="checkbox" />
<ul class="tooltip" data-reactid=".0.3.3:2.1.0.0.1">
<li class="tooltip" data-reactid=".0.3.3:2.1.0.0.1.0">
Done.</li>
</ul>
</li>
</ul><span data-reactid=".0.3.3:2.1.1"></span> <span data-reactid=
".0.3.3:2.1.2"></span><span data-reactid=".0.3.3:2.1.3">Test
2.</span>
</li>
<li data-marker="5" data-reactid=".0.3.3:2.2">
<ul class="inline has-tooltip" data-marker="1" data-reactid=
".0.3.3:2.2.0">
<li class="has-tooltip" data-reactid=".0.3.3:2.2.0.0">
<input class="hide-instance" data-reactid=
".0.3.3:2.2.0.0.0" id="hide-2015-9-18.1" name=
"hide-2015-9-18.1" type="checkbox" />
<ul class="tooltip" data-reactid=".0.3.3:2.2.0.0.1">
<li class="tooltip" data-reactid=".0.3.3:2.2.0.0.1.0">
Done.</li>
</ul>
</li>
</ul><span data-reactid=".0.3.3:2.2.1"></span> <span data-reactid=
".0.3.3:2.2.2"></span><span data-reactid=".0.3.3:2.2.3">12PM
Test.</span>
</li>
<li data-marker="5" data-reactid=".0.3.3:2.3">
<ul class="inline has-tooltip" data-marker="1" data-reactid=
".0.3.3:2.3.0">
<li class="has-tooltip" data-reactid=".0.3.3:2.3.0.0">
<input class="hide-instance" data-reactid=
".0.3.3:2.3.0.0.0" id="hide-2015-9-18.1" name=
"hide-2015-9-18.1" type="checkbox" />
<ul class="tooltip" data-reactid=".0.3.3:2.3.0.0.1">
<li class="tooltip" data-reactid=".0.3.3:2.3.0.0.1.0">
Done.</li>
</ul>
</li>
</ul><span data-reactid=".0.3.3:2.3.1"></span> <span data-reactid=
".0.3.3:2.3.2"></span><span data-reactid=".0.3.3:2.3.3">12PM
Test.</span>
</li>
</ul>
Is there something I'm not closing? Am I closing tags in the wrong order? What else am I doing that is causing the Suckerfish-annotated checkboxes to appear to have a nesting structure, and how can I fix it?
Thanks,
