is there any hotspot tooltip plugin to show html data inside?

Hello,

I am looking to add some html content dynamically on top of hotspots using ajax. But I am wondering if there is already a plugin or script that handles this for tooltips (like jquery tooltipster that can display html).

I was thinking to go the gsap route but it might take a bit too long for my current needs. Hoping there is already a plugin/tool that could allow me add tooltip functionality to a hotspot from which I could inject html content on it through ajax. The tooltip could be html positioned on top of the hotspot that will be clicked and or a krpano layer or maybe another hotspot?

I am open for suggestions! Ideally I'll like to have a bit of control on the animation/look (html/css) but if not basic tooltip functionality that allows me to put the content I mentioned will be ok at this time.

Thank you

Hello Piotr,

Thank you for your example, looks nice. I am looking more for an actual tooltip with html content that is positioned on top of a hotspot when clicked. I believe your example is triggering a modal but not following the hotspot position.

So when I click on a hotspot the tooltip can show pulling data through ajax from a database to a hotspot ID and relative to its coordinates atv ath on top. I am mostly looking for the tooltip functionality (opening html content on top of hotspot) and I can take care about implementing the ajax/animation aspects. But first I want to know what methodology for tooltip should I use.

thanks Piotr! I will look into that. would be cool to see an example in case someone has one.

I was thinking to have an actual tooltip div finding the position of the hotspot with a function copying the transforms, but I want getting the position working. I dont need vr at all so I was already using css3. That approach with layers sounds like it could work although doing it that way not sure how much control on the look/animation of the layer I would have.

I am using gsap to sequence a bunch of other timeline animations. So ideally I would have an html layer div as tooltip rather than a layer if possible so that can play along other components, but I am not sure how to match the hotspot positions from the transform translate coordinates that render from the hotspots atv/ath.

with this js I can get a test tooltip div to open and position next to a hotspot:

   function openTooltip() {
       var hotspot = krpano.get('hotspot[tag-tooltip]');
       if (!hotspot) {
           console.error('Hotspot not found or krpano object not available.');
           return;
       }
       
       var screenCoords = krpano.actions.spheretoscreen(hotspot.ath, hotspot.atv);
       console.log('Spherical coordinates:', hotspot.ath, hotspot.atv);
       console.log('Screen coordinates:', screenCoords.x, screenCoords.y);
       
       var screenX = screenCoords.x;
       var screenY = screenCoords.y;
       
       var tooltip = document.getElementById('tooltip');
       if (!tooltip) {
           console.error('Tooltip element not found.');
           return;
       }
       
       tooltip.style.display = 'block';
       tooltip.style.left = screenX + 'px';
       tooltip.style.top = screenY + 'px';
   }
   document.addEventListener('click', function(event) {
       var tooltip = document.getElementById('tooltip');
       if (!tooltip) {
           console.error('Tooltip element not found.');
           return;
       }
       
       if (!tooltip.contains(event.target)) {
           tooltip.style.display = 'none';
       }
   });

I would like to know if it is possible to track a hotspot css transform changes when move around the sphere with js. That way I could update the tooltip div position based on dynamic hotspot transform values without having to click the hotspot to update its position (so that the tooltip could follow the hotspot if opened as I rotate the sphere before closing it). Let me know if you have any ideas, I know how to click and track values from a hotspot but not how to do so without clicking a hotspot.

hmm looking into this a bit more in detail, I think going with a krpano layer might be a better option for a tooltip popup and easier to integrate than an external div to match hotspot position/perspective and keep following it as it changes coordinates when moving around. I am more familiar with html, css and js rather than krpano layers, actions. So I am trying to understand what approach is more convenient as I learn more about krpano.

Having said this I was reading the documentation and saw we can also load an html iframe in a layer so that could work.

EDIT: I will try to use the popup example I just found on the examples page and adjust my question:

So I discarded the js from my previous post and tried using this example code instead:

krpano.com - View Source

this is part of the code in that url:

<hotspot name="{dynamic:url_title}" style="skin_hotspotstyle_tag" ath="{dynamic:hotspot_ath}" atv="{dynamic:hotspot_atv}"      
        
        onover="popup('iframe', 'https://content-iframe/dynamic-segment', 400, 300, true);" />
     
   
     
    <action name="popup" scope="private:POPUP" args="type, content, width, height, scrollbars, onclose_callback"><![CDATA[
        if(popup, break(); );
        
        addlayer('popup_bg', popup_bg);
        set(popup_bg,
            type=container,
            align=center, width=100%, height=100%,
            zorder=99,
            handcursor=false,
            bgcapture=true,
            capture=false,
            //bgcolor=0x123456, onloaded='tween(bgalpha,0.3,1.0);',    // optional: colorize the background
            onout='popup_close()'
        );
            
        
        addlayer('popup', popup);
        set(popup,
            type=container,
            parent='popup_bg',
            width=400,
            height=300,
            align=center,
            bgborder='1 0x555555 1',
            bgcolor=0x555555,
            bgalpha=0.7,
     scrolling="no"
     css="overflow: hidden;"
            bgshadow='0 10 20 0x000000 0.5',
            bgcapture=true,
            maskchildren=false,
            capture=true,
            handcursor=false,
            alpha=0
        );
        

I will like to know the following if someone can please help me:

1) how can I completely disable the iframe scrollbars (I did try setting: scrolling="no"
css="overflow: hidden;" but seems like it doesnt work quite I can still see the scrollbars when iframe loads).

2) I would like the behavior to work "onover" rather than "onclick" (at least for desktop it could be on click for mobile) I did try changing the onover='popup_close()' but the popup doesnt dissapear when I overon the bg (also the close btn stops working). So it does open correctly "onover" but I am not sure how to make it close onout? or onover to the bg with that example.

3) the position of the popup is currently align=center, width=100%, height=100%, and the popup has parent='popup_bg' I would like the popup to be aligned in relation to the hotspot the opens it (topright) rather than the window. I tried changing the parent to the hotspot name but it was not working.

Any ideas how to fix/improve this?

Thanks for any help

thanks