Initialising bootstrap Popovers within a Hype Project

Using JavaScript with Hype
1

I managed to include a Bootstrap popover in my Hype project.

Bootstrap documentation on popovers says that they need to be initiated with a function first in order to work. I run this function on prepare for display but I want to initialise popovers from within the head tag of the document and that's where I'm struggling.

How would I run this function from within the head tag? I tried just including it between the script tags in the head and it does not work. I also tried to run it on window load and still does not work.

Any help would be appreciated. Also, if you have any other suggestion how to initialise popovers in a hype document I would be grateful.

Thanks for your help.
Popover.zip (18.4 KB)

2

Probably putting it in the listener for SceneLoad. (Put in Head file )

<script>
	
	function sceneLoadedCallback(hypeDocument, element, event) {
		
	
		//create a handler for messages
		 		const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
		const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
	 

		return true;
	}
	
	 
	if("HYPE_eventListeners" in window === false) {
		window.HYPE_eventListeners = Array();
	}
	window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":sceneLoadedCallback});
	
	</script>
3 Likes
3

Thanks Mark! I'll give it a go over the weekend and report back.

Greg