Popovers, tooltips, and details
MapSVG has three ways to show content for a Region or Marker. Use this page to pick the right one, then configure templates and Actions.
Comparison
| Tooltip | Popover | Details view | |
|---|---|---|---|
| Typical trigger | Mouseover (desktop) | Click / touch | Click / touch |
| Size | Small | Medium, scrollable | Largest, scrollable |
| Position | Follows pointer (or fixed offset) | Anchored to the object; can move with the map | Fixed location (sidebar, header, custom container, etc.) |
| Best for | Short labels / hints | Medium content without leaving the map | Long text, galleries, forms |
| Mobile | No hover — use touch → popover (or details) instead | Works on touch; optional fullscreen | Optional fullscreen on mobile |
Tooltips
Configured under Menu › Settings › Tooltips and enabled per event in Actions (Region / Marker mouseover).
On touch devices there is no mouseover. Copy tooltip content into a popover template and enable popover on Region touch / Marker touch in Actions if you need the same info on mobile.
See Settings › Tooltips.
Popovers
Configured under Menu › Settings › Popovers and triggered from Actions (click / touch / directory).
Useful options: width / max size, Center map on popover, reset position on close, fullscreen on mobile.
Templates: Region popover, DB Object popover — Templates.
Details view
Configured under Menu › Details. Fixed layout; good for long content.
| Field | Description |
|---|---|
| Location | Default MapSVG containers or a custom container (enable containers in Settings). |
| Container ID | Element ID when Location is Custom, e.g. page HTML <div id="my-details"></div>. |
| Width | Pixels (200px) or percent (100%). |
| Auto height | Height grows with content. |
| Margin | CSS margin, e.g. 10px 20px. |
| Fullscreen on mobile devices | Fullscreen details on small screens. |
CSS class: .mapsvg-details-container in the CSS editor.
Full option notes: Details view.