为什么Qtip2会在放大移动设备时关闭屏幕？

Question

你好，我有Qtip2的问题，我不明白为什么不工作。如果您使用平板电脑或移动设备访问此小提琴：

https://jsfiddle.net/number23/g1oxnjbp/

您可以注意到，如果单击结构并进行缩放，工具提示将保持原位。

在此地址（我的游戏）使用相同的html时，工具提示会在屏幕外显示。

1）http://dev1.medieval-europe.eu

2）user：测试密码：b86a6

3）转到http://dev1.medieval-europe.eu/index.php/region/view

4）单击结构然后缩放。

我尝试了一切，我迷失了......为什么它表现得与众不同？

HTML

<div id="container">
<div id="wrapper">
<div class='list-structures'>
  <div class='structure' id="structure1">
    <img src="https://s19.postimg.org/snveiircj/academy_1.jpg">
  </div>
  <div class='structure' id="structure2">
    <img src="https://s19.postimg.org/snveiircj/academy_1.jpg">
  </div>
</div>

<div class='list-structures'>
  <div class='structure' id="structure3">
    <img src="https://s19.postimg.org/snveiircj/academy_1.jpg">
  </div>
  <div class='structure' id="structure4">
    <img src="https://s19.postimg.org/snveiircj/academy_1.jpg">
  </div>
</div>
</div>
</div>

的Jscript

$(document).ready(function() {
  $('.structure').each(function() {
    $(this).qtip({
      content: "<p><a href='#'> clickme</a> MehMehMehMehMehMeh<br/><br/><br/>hMEhMEhMEhMEhMEhMEhMEh<br/><br/></p>",
      hide: {
        fixed: true,
        delay: 100,
        event: 'mouseout',
      },
      show: 'click',
      style: 'qtip-dark',
      position: {
        my: 'top left',
        at: 'bottom right',        
      }
    });
  });
});

CSS

div.list-structures {
  float: left;
  margin-bottom: 10px;
  width: 100%;
}

div.structure {
  float: left;
  display: block;
  margin-right: 5px;
  margin-top: 5px;
  width: 100px;
  height: 100px;
}

div.structure img {
  padding: 1px;
  border: 2px solid darkgrey;
}