Intro.js顶部定位不起作用

Question

我使用Intro.js进行新产品的“巡视”，所有“介绍提示”都相应地定位自己，除了屏幕左下方的某个元素。我试图将位置设置为“顶部”以使其显示在一系列图标上方，但是，它显示在右侧并切掉包括prev和next按钮的tip的底部部分。

按钮通过弹出窗口触发巡视：

 <div class="sidebar-footer hidden-small" id="tour6">

它所在的div：

{
            element: '#tour6',
            intro: "Navigate here to go back to the home page, to make your 
            screen full-sized, to lock your sidebar so it doesn’t move, or to 
            log out. ",
            position: 'top'
          },

和有问题的JS：

function startIntro(){
    var intro = introJs();
      intro.setOptions({
        steps: [
          {
            element: '#tour1',
            intro: "Copy",
            position: 'right'
          },
          {
            element: '#tour2',
            intro: "Copy",
            position: 'left'
          },
          {
            element: '#tour3',
            intro: "Copy",
            position: 'left'
          },
          {
            element: '#tour4',
            intro: "Copy",
            position: 'bottom'
          },
          {
            element: '#tour5',
            intro: "Copy",
            position: 'bottom'
          },
          {
            element: '#tour6',
            intro: "Navigate here to go back to the home page, to make your screen full-sized, to lock your sidebar so it doesn’t move, or to log out. ",
            position: 'auto'
          },
          {
            element: '#tour7',
            intro: "Copy"
          }
        ]
      });

      intro.setOption('showProgress', true).setOption('showStepNumbers', false).start();start();

Full JS：

{{1}}