How to configure popper.js arrow automatically?

Question

On their official website popper.js claims that it will handle arrows automatically for you. https://popper.js.org/#arrows

However when I tried some basic html content, the arrow doesn't show:

<div id="popover-trigger"></div>
<div id="popover-container">
    <span class="arrow"></span>
</div>
<script type="text/javascript">
    const popper = new Popper(popper_trigger, popper_content, {
                "placement": "top",
                "modifiers": {
                    "arrow": {
                        element: '.arrow'
                    },
                   "offset": { 
                       enabled: true,
                       offset: '0,10'
                    }
                },
                "onCreate": function(data){
                    console.log(data);
                }
            });
</script>

I searched online, and found very little mentioning to this feature. Some involves manually adding css styles: enter link description here, while I thought this feature should come out of box.

I also used developer's tool to examine the generated html structure, and found nothing arrow related element there.

Am I missing something here?

score 0 · Answer 1 · answered Mar 17 '22 at 10:27

Popper will handle arrow if you configure it like element: '.arrow'.

In your code example you missing popper_trigger and popper_content definitions that causing error.

At this Code snippet you can see, that arrow will be placed where it should and will be related to popper background color. I've made comments in Code snippet for more details.

// find reference and popper on page first
const popper_trigger = document.querySelector('#popover-trigger');
const popper_content = document.querySelector('#popover-container');

const popper = new Popper(popper_trigger, popper_content, {
  "placement": "top",
  "modifiers": {
    "arrow": {
      element: '.arrow'
    },
    "offset": {
      enabled: true,
      offset: '0,10'
    }
  },
  "onCreate": function(data) {
    //console.log(data);
  }
});

/* 
  example purpose (wrapper)
  styled wrapper, simulating page (container) scroll
*/
.popper-wrapper {
  height: 300px;
  width: 300px;
  border: 3px dotted black;
  overflow: scroll;
}

.popper-wrapper:before,
.popper-wrapper:after {
  content: '';
  display: block;
  height: 250px;
  width: 100%;
}
/* end of wrapper styling */

/* 
  example purpose 
  styling reference
*/
#popover-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  top: -150px;
  background: tomato;    
  color: white;
}
/* end of reference styling */

/* popper styling */
#popover-container {
  padding: .25rem;
  background-color: #979797;
}

.arrow,
.arrow:before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.arrow {
  visibility: hidden;
}

.arrow:before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

#popover-container[x-placement='top'] > .arrow {
  bottom: -4px;
}

#popover-container[x-placement='bottom'] > .arrow {
  top: -4px;
}
/* end of popper styling */

<!-- importing Popperjs v1 -->
<script src="https://unpkg.com/popper.js"></script>

<!-- added wrapper to simulate scroll -->
<div class="popper-wrapper">
  <!-- reference -->
  <div id="popover-trigger">
    reference
  </div>
  
  <!-- popper -->
  <div id="popover-container">
    popper tooltip
    <span class="arrow"></span>
  </div>
</div>

score -1 · Answer 2 · answered Nov 25 '19 at 02:19

-1

try to add x-arrow as an attribute: <span x-arrow></span>

answered Nov 25 '19 at 02:19

Dmitry Nasonov

1

1

I appreciate your answer. Could you please post a working code as an answer? The html which you posted is invalid. – Rajan Panneer Selvam Nov 25 '19 at 02:35

How to configure popper.js arrow automatically?

2 Answers2