JSON "position" ignores

[DigitalAndSEO]

If I force a tooltip to appear in a position in the JSON ( example: position: right ) it ignores it and it also shows it in the middle (v 3.1.0)

External JS:

var intro = introJs();
intro.setOptions({
        steps: [
        {
        element: '#buscador',
        intro: '<b>Descubra otros expositores</b> según el <b>tipo de producto</b>, <b>marca</b> o <b>nombre de empresa</b>.',
        position: 'right'
        },
        {

Result: https://jmp.sh/QKQyOok

[bastien70]

Hello dude, did you find a solution? I have the same problem

[DigitalAndSEO]

Hello dude, did you find a solution? I have the same problem

I still haven't been able to find the problem. Waiting for the support team to answer me :(

[bastien70]

Did you tried this :

https://introjs.com/docs/intro/options/#tooltipposition

[DigitalAndSEO]

So you mean?

var intro = introJs();
intro.setOptions({
        steps: [
        {
        element: '#buscador',
        intro: '<b>Descubra otros expositores</b> según el <b>tipo de producto</b>, <b>marca</b> o <b>nombre de empresa</b>.',
        tooltipPosition: 'right'
        },
        {

If so, no, it doesn't work. Always appears bottom left: https://jmp.sh/OsH5YMw

Does it work for you this way with version 3.1.0?

[bastien70]

Me neither unfortunately .. Nothing works to assign a position, it's very strange

[afshinm]

I will send a patch today

[afshinm]

@DigitalAndSEO I just tested your code and couldn't reproduce the issue, see https://jsfiddle.net/4nyf9hcr/3/

If you resize the preview panel and make it narrower though, you'll see that when there is not enough space (width), Intro.js changes the tooltip position to bottom-middle because there is no way to fit the tooltip.

Let me know if that makes sense.

[jordanmilford]

Is there any way to disable the positioning override at low-width resolutions?

It's forcing some tooltips offscreen on mobile devices and I can't find any control to get them to display in the correct position.

If I could opt-in to manual positioning at all resolutions I think I could work around this issue.

[afshinm]

That makes sense @jordanmilforddavis , I think we can add a manualPosition mode. any comments @bozdoz?

[bozdoz]

curious what's wrong with the auto positioning. I think manual position or force position makes sense though.

[jordanmilford]

Thanks for considering this feature request.

The issue with auto-positioning only occurs when attaching a tooltip to an element on the right half of the viewport. As the position is forced to bottom-middle, the tooltip extends past the width of the viewport.

It's ultimately still functional but may confuse users in my use-case, as the responsive design of my site does not require mobile users to scroll horizontally anywhere else.

I can provide screenshots or code up a quick example of this if helpful.

[afshinm]

@jordanmilforddavis @DigitalAndSEO I just opened this PR: https://github.com/usablica/intro.js/pull/1152 -- can you please test that by setting autoPosition: false and let me know if it addresses your issue?