<div class="ecl-popover" data-ecl-auto-init="Popover"><a href="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-popover__toggle" aria-controls="popover-example" data-ecl-popover-toggle aria-expanded="false" aria-label="Popover toggle"><svg class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.svg#share"></use> </svg><span class="ecl-link__label">Popover</span></a> <div id="popover-example" class="ecl-popover__container" hidden> <div class="ecl-popover__content"> <ul class="ecl-popover__list"> <li class="ecl-popover__item"><a href="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-popover__link"><svg class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.svg#global"></use> </svg><span class="ecl-link__label">item 1</span></a></li> <li class="ecl-popover__item"><a href="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-popover__link"><svg class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.svg#global"></use> </svg><span class="ecl-link__label">item 2</span></a></li> <li class="ecl-popover__item"><a href="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-popover__link"><svg class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.svg#global"></use> </svg><span class="ecl-link__label">item 3</span></a></li> <li class="ecl-popover__item"><a href="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-popover__link"><svg class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.svg#global"></use> </svg><span class="ecl-link__label">item 4</span></a></li> <li class="ecl-popover__item"><a href="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-popover__link"><svg class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.svg#global"></use> </svg><span class="ecl-link__label">item 5</span></a></li> <li class="ecl-popover__item"><a href="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-popover__link"><svg class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.svg#global"></use> </svg><span class="ecl-link__label">item 6</span></a></li> <li class="ecl-popover__item"><a href="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-popover__link"><svg class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.svg#global"></use> </svg><span class="ecl-link__label">item 7</span></a></li> <li class="ecl-popover__item"><a href="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-popover__link"><svg class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.svg#global"></use> </svg><span class="ecl-link__label">item 8</span></a></li> </ul> </div> </div> </div>
Try it yourself on the playground
Playground