Search code examples
javascriptphpjquerywordpresstooltipster

Tooltipster tooltip contents empty when using WordPress

Implementing Tooltipster with our WordPress site, but hit a roadblock. The tooltips open correctly, but the content within the tooltip is empty. This code works outside of WordPress. Please help?

Here's how it's all being setup.

1) Within functions.php:

wp_enqueue_style( 'ttcss', '/ours/tt/dist/css/tooltipster.bundle.min.css' );
wp_enqueue_style( 'ttcss-noir', '/ours/tt/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css' );
wp_enqueue_script( 'ttjs', '/ours/tt/dist/js/tooltipster.bundle.min.js', array('jquery'), null, true );

2) Within header.php before closing </head>:

<script> jQuery(document).ready(function() { 
            jQuery('.ourtip').tooltipster({
                    theme: 'tooltipster-noir',
                    contentCloing: true,
                    contentAsHTML: true
            }); 
    }); 
    </script>

3) Within the theme, where the tooltip is desired:

<span class="ourtip" data-tooltip-content="#ourtip_content">Tool</span>

4) Lower down within the theme, what should be displayed (but isn't):

<?php
function ours_publisher_popup() 
{
?>
<style>.ourtip_templates {display: none;} </style>
<div class="ourtip_templates">
    <div id="ourtip_content">
        <strong>This text should display but is missing.<br></strong>
    </div>
</div>
<?php
}
ours_publisher_popup(); ?>
Solution

  • Ended up being a conflicting plugin. Disabled WP plugins one at a time until it started working, and then found one that was also trying to use Tooltipster. Deactivated that and functionality returned.