I want to add a popup glossary to my Body copy with HannaCode. Example, my Body field is:
The best way to drive[[gloss tag="drive"]] the golf ball is to use a stead backswing[[gloss tag="backswing"]] and follow through smoothly...
My HannaCode is:
<?php namespace ProcessWire;
if (isset($tag)) {
$faq_page = $pages->get('template=faq-answer,name='.$tag);
if ($faq_page->id) {
$characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$charactersLength = strlen($characters);
$randomString = '';
for ($i_for_loop = 0; $i_for_loop < 10; $i_for_loop++) {
$randomString .= $characters[rand(0, $charactersLength - 1)];
}
$popup_idname = "glossary-{$randomString}";
echo "<a data-toggle='{$popup_idname}'><i class='fi-info'></i></a>";
echo "<div class='dropdown-pane' id='{$popup_idname}' data-dropdown data-hover='true' data-hover-pane='true'>";
echo "<div><strong>{$faq_page->get('headline|title')}</strong>: {$faq_page->details_text}</div>";
echo "</div> ";
}
}
?>
It woks nearly awesome, and inserts the <a>INFO ICON</a> correctly in the Body output, and then after that it inserts the hidden popup html. The popup works etc.
However, After the first ICON processwire inserts the </p> BEFORE the rest of the Body. instead of at the end
If I add more than one glossary definition to the Body, only the first one has this problem. The (Body ending </p> that TinyMCE puts in has already been rendered. All the others ICON links work awesome no other </p> tags are added.
I end up with something looking like this:
The best way to drive ICON
the golf ball is to use a stead backswing ICON and follow through smoothly...