Ionic 4 Popover arrow

Ionic Framework
1

I would like to insert a popover like the Ionic official example but I can’t see the arrow (popover-arrow).
What should I do?
In the example it is displayed but even going to see the source code I cannot understand how it can appear.

2

Hello, maybe try add
detail=true in ion-item tag

Ionic official documentation - Item detail rows

3

I test it on iOS simulator and it works.
When i pos the problem i was seeing the popover on the browser.

4

Maybe you were testing on an Android phone, the arrow does not show in this case. You still can access the ionic css source code to use it in your global.scss node_modules/@ionic/core/dist/collection/components/popover/popover.ios.css

.popover-arrow {
  display: block;
  position: absolute;
  width: 20px;
  height: 10px;
  overflow: hidden;
}

.popover-arrow::after {
  left: 3px;
  top: 3px;
  border-radius: 3px;
  position: absolute;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: var(--background);
  content: "";
  z-index: 10;
}
[dir=rtl] .popover-arrow::after, :host-context([dir=rtl]) .popover-arrow::after {
  left: unset;
  right: unset;
  right: 3px;
}

:host(.popover-bottom) .popover-arrow {
  top: auto;
  bottom: -10px;
}

:host(.popover-bottom) .popover-arrow::after {
  top: -6px;
}

@supports (backdrop-filter: blur(0)) {
  :host(.popover-translucent) .popover-content,
:host(.popover-translucent) .popover-arrow::after {
    background: rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);
    backdrop-filter: saturate(180%) blur(20px);
  }
}