Adding interactive property changes Tippy dimensions

[sjmoll]

I have a tooltip with the following settings:

<script src="https://unpkg.com/@popperjs/core@2"></script>

<script src="https://unpkg.com/tippy.js@6"></script>

<script>
tippy.setDefaultProps({
delay: [50, 200], 
interactive: true, 
interactiveBorder: 10, 
placement: 'right',
popperOptions: { 
   modifiers: [{
      name: 'flip',
      options: {
      fallbackPlacements: ['top', 'bottom', 'right'],
      },
      },]
   }
});

tippy('#teen_email', {
        content: 'Busy parents can miss our emails so it is helpful to email teens too. We never share your information.',
      });
</script>

It displays as a narrow tooltip about 92px wide, unless I remove the interactive setting. Adding maxwidth:350 did not help. Is there a reason for this?

[atomiks]

It gets appended to the parent node which is lilkely constraining it. You can move it outside the parent node with appendTo: document.body

[sjmoll]

Thanks, that was it!