I am using Tippi.js to make tooltip faster and its support ajax. Add this code to enqueue the files and to run ajax.
function enqueue_tippy_inline_ajax_script() {
// Enqueue Tippy.js (hosted locally or via CDN)
wp_enqueue_script('tippy-js', 'https://unpkg.com/@tippyjs/core@6', [], null, true);
// Inline JavaScript for AJAX and Tippy
?>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// Initialize Tippy on elements with data-property-id
tippy('[data-property-id]', {
content: 'Loading...', // Initial content
allowHTML: true,
onShow(instance) {
const propertyId = instance.reference.getAttribute('data-property-id');
// Check if content is already loaded
if (!instance.reference.getAttribute('data-loaded')) {
fetch(`<?php echo admin_url('admin-ajax.php'); ?>?action=get_property_description&property_id=${propertyId}`)
.then(response => response.json())
.then(data => {
if (data.success && data.data.description) {
// Set the fetched description as tooltip content
instance.setContent(data.data.description);
instance.reference.setAttribute('data-loaded', true);
} else {
instance.setContent('Description not available');
}
})
.catch(() => instance.setContent('Error loading description'));
}
}
});
});
</script>
<?php
}
add_action('wp_footer', 'enqueue_tippy_inline_ajax_script');Then add this code below to scan through cpt for glossary so it can find the exact words of cpt title and othe cpt/post content.
Add this to allow ajax from getting and sending the data we need so it can displayed on frontend.

