THis simple script works in codepen:
<calcite-popover label="Example label" reference-element="popover-button">
<p style="padding:0 10px;display:flex;flex-direction:row">
Popover content here
</p>
</calcite-popover>
<calcite-link id="popover-button">Activate Popover</calcite-link>
But when I use the same script inside a tab, the popover doesn't appear.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>Test</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script type="module">
import WebMap from "https://js.arcgis.com/next/@arcgis/core/WebMap.js";
import MapView from "https://js.arcgis.com/next/@arcgis/core/views/MapView.js";
var map = new WebMap({
basemap: "streets-vector",
portalItem: { // autocasts as new PortalItem()
id: "f2e9b762544945f390ca4ac3671cfa72"
}
})
const view = new MapView({
map,
container: "viewDiv",
center: [-122.475, 39.737],
zoom: 5
});
document.querySelector("calcite-shell").hidden = false;
document.querySelector("calcite-loader").active = false;
</script>
</head>
<body translate="no">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Test</title>
<script src="https://js.arcgis.com/calcite-components/1.0.0-beta.77/calcite.esm.js" type="module"></script>
<link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.0-beta.77/calcite.css" />
<link rel="stylesheet" href="https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/light/main.css" />
</head>
<style>
</style>
<body>
<calcite-shell content-behind hidden>
<calcite-shell-panel slot="primary-panel" detached>
</calcite-shell-panel>
<!-- ShellPanel slot="contextual-panel" -->
<calcite-shell-panel slot="contextual-panel" position="end" detached>
<calcite-block open heading="Test" style="height:1110px">
<calcite-tabs>
<calcite-tab-nav slot="tab-nav" id="thetabs">
<calcite-tab-title id="tab2" class="tab2" tab="Tab1" active>Tab1
</calcite-tab-title>
<calcite-tab tab="Tab1" style="height: 750px;">
<calcite-popover label="Example label" reference-element="popover-button">
<p style="padding:0 10px;display:flex;flex-direction:row">
Popover content here
</p>
</calcite-popover>
<calcite-link id="popover-button">Activate Popover</calcite-link>
</calcite-tab>
</calcite-tabs>
</calcite-block>
</calcite-shell-panel>
<div id="viewDiv"></div>
</calcite-shell>
</body>
</html>
