jquery - 如何使用在运行时分配给页面元素的 qTip2 创建工具提示

Question

我正在尝试创建一个 qTip2 气泡，但在加载时不显示。然后将其显示在单击的任何图像下。

请告知最好的方法是什么。（使用 qTip 解决气泡走出屏幕的问题）。

谢谢

编辑：

查看http://jsfiddle.net/jnbPP/5/的问题（寻找正确的方法）

Answer 1

那么你需要在点击时加载它，例如：

$('img[title]').live('click', function(event) {
        $(this).qtip({
              overwrite: false,
              content: {           
                 text: $(this).attr('title') ,
              },
              position: {
                  my: 'top center', 
                  at: 'bottom center', 
                  adjust : {
                    screen : true
                  }
              },  
              show: {
                 event: event.type,
                 ready: true,
                 solo: true
              },
              hide: 'unfocus',
                style: {
                    classes: 'ui-tooltip-light'
              }
           });
    });

看看我的小提琴：示例

采用

adjust : {
     screen : true
}

将工具提示保留在屏幕上。

给你。点击

$('img[title]').live('click', function(event) {
    var content = $('#settings').clone();
    $('input', content).val( $(this).width() );

    $(this).qtip({
      overwrite: false,
      content: {           
            text: content,
            title: {
                text: ' ',
               button: true
            }
         },
         position: {
             my: 'top center',  // Position my top left...
             at: 'bottom center', // at the bottom right of...
             viewport: $(window)
          },

      show: {
         event: event.type,
         ready: true,
         solo: true
      },
      hide: 'unfocus',
         style: {
               classes: 'ui-tooltip-ajax ui-tooltip-light'
         }
   });
});