Tour on kamranahmed.info/driver - popups are cut off

[krishan]

While stepping through the list of features, the popups are cut off at the bottom, so the user needs to manual scroll to move them into the visible window, in order to read or click buttons.

In latest Chrome:

Google Chrome is up to date
Version 65.0.3325.162 (Official Build) (64-bit)

[FezVrasta]

@kamranahmedse you may want to consider Popper.js as positioning library for the popovers?

[Rombecchi]

Also, on mobile, when you select a very high item (more than the screen), the popover is not displayed (at any position) and therefore the user must shake the screen.

I think it is better to ignore the height of the element (and therefore its visualization), allowing the visualization of the popover itself

[kamranahmedse]

@FezVrasta I planned on using popper.js initially but did not use it to keep it dependency free. However, the positioning functionality is in place, shouldn't be an issue. Will look into it as soon as I have time.

[00cpxxx]

Maybe adding and "auto" setting as placement and then calculating the position according to the free space around the element.

I also have issues with full length elements and I swear there was some comment about that in a bug but I can't find it anymore. IMO the popup should be centered always or there should be an extended position attribute to determine it.

[grandynguyen]

Yeah, the fact that the popover always left aligns with the target element has been a huge headache for me too. It's making using position top or bottom on an element near the right edge of the screen impossible because they end up getting cut off.

[kamranahmedse]

This has been fixed in the latest release – have a look at the updated demo.

@grandynguyen this should also be fine now. We have added more position values (bottom-center in your case) that would allow you to position the popover accordingly

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    // position can be left, left-center, left-bottom, top,
    // top-center, top-right, right, right-center, right-bottom,
    // bottom, bottom-center, bottom-right
    position: 'left',
  }
});

Please re-open if you still face any issues.

[st-schneider]

I still have this issue on small displays like iphone5 with lot of text. maybe add a max width option

[herbdesen]

I managed to solve using position: 'auto' in the popover element.

[Naren-hybreeder]

I am also getting the responsive issue in mobile. I have used the below popover code for desktop but in the mobile device also getting on the right side along with a horizontal scroll. Any idea how to solve it?

 popover: {
     className: 'tour',
      title: 'sometext here',
      position: 'right'
    }