Overview
The hotspot textbox is a built-in tooltip or information display that appears when a user hovers their mouse over a polygon hotspot. This built-in textbox primarily displays the Title of the polygon hotspot as a tooltip when hovered over.
However styling is quite limited only allowing the following styling;
Visibility: Whether it's visible at all.
Background Color: The fill color of the text box.
Border Color: The color of the box's border.
Radius: To round the corners of the box.
Size: Whether it's auto-sized or has a fixed size.
Text Color: The color of the text (the hotspot's Title and Description).
Word Wrap: If the text should wrap.
This “Little Bits” tutorial will show you how to create Font Styles for Polygon Hotspot Textbox by;
Adding CSS code to a Draw Code Element
Note: this tutorial was built in Pano2VR Tour Builder Version: 7.1.1. You can download the software here. As “Little Bits” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage
Note: click on any image in the tutorial to enlarge it
Final Output
Tutorial Folder
The tutorial folder, ‘Polygons-Change-Font’ contains the following:
green-grid.jpg file,
a Pano2VR project 'hotspot-font-styles.p2vr'
a skin 'hotspot-font-styles.ggsk' and
a font folder ‘skranji-v13-latin’ with two fonts variations (Figure #1)
Figure #1. Polygons-Change-Font Tutorial Folder
Getting Started
1. Download the zipped tutorial folder here
2. Unzip the tutorial folder
3. Open the ‘hotspot-font-styles.p2vr’ (Figure #2)
Figure #2: Project Window
4. Output the project (Figure #3)
The output should be the same as the sample below and when you mouse over the polygons you will see the default Textboxes
Figure #3: Output
Note: You can view the live tour below
6. Open the Skin Editor (Figure #4)
In the skin, the Tree contains two Code Elements placed in the bottom right corner of the Canvas.
Note: both are set to permeable so as to not interfer with any mouse movement in that area.
Figure #4: Skin Editor
7. Click on the ‘Font’ element in the tree
8. In the Properties panel, click on the Code Element dropdown arrow to reveal the settings (Figure #5)
Note: these are the fonts we will use in the styled textboxes. No changes are required to the Fonts element.
Figure #5: Fonts element and Code Element properties
9. Click on the ‘Hotspot_text’ element in the tree
10. In the Properties panel, click on the Code Element dropdown arrow to reveal the settings (Figure #6)
Note: the code element properties are empty, we will set them in the next step.
Figure #6: Hotspot_text element and Code Element properties
11. Click on the ‘Open Editor’ button next to the Code: text field to open the “Enter Value” window (Figure #7)
Figure #7: Edit Value window
12. Copy the code below
/*!
<style>
/* This targets the hotspottext element by its ID. */
/* It will apply your desired font and now the color to the hotspot label text. */
#hotspottext {
font-family: "Skranji", sans-serif; /* Your desired font */
font-size: 24px; /* Your desired font size */
color: white !important; /* Force this color to override any inline styles */
border: 2px dashed white !important; /* Example border: 2px solid blue */
border-radius: 8px !important; /* Example border-radius: 8px for rounded corners */
background-color: rgba(0, 0, 255, 0.3) !important; /* Transparent blue background */
padding: 5px !important; /* Add some padding so text doesn't touch the border */
width: 200px !important; /* Example fixed width. Use with caution! */
height: 60px !important; /* Example fixed height. Use with caution! */
text-align: center !important;
line-height: 65px !important; /* For vertical centering with fixed height */
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
</style>
*/13. Paste it into the ‘Enter Value’ window (Figure #8)
Figure #8: Code pasted in the Enter Value window
14. Click on the ‘OK’ button to add the code (Figure #9)
Note: if you simply close the window using the system buttons you will loose the code
Figure #9: Code added to skin
15. Close and save the skin
16. Republish the project
Now when you mouse over the Polygon Hotspots the new text will be displayed
Summary
"Hey there! 👋 If my tutorials have made your tech life a little easier (or a lot less confusing), consider buying me a virtual coffee! ☕️ Retirement means more time to help you, but sadly, less income for snacks. Click the Donation button 🙌 and thanks for the love!"
