标签: qtip

qTip动态内容的动态参数

我想用qTip传递一个动态参数,但它失败了.my_ajax_controller.php只显示变量类型,但不显示q.

$('a.menu_help').qtip({
    content: {
      url:'my_ajax_controller.php',
      data: 'type=help_menu&q='+$(this).attr('id'),
      method: 'get'
    },
    show: 'mouseover',
    hide: 'mouseout'
});
Run Code Online (Sandbox Code Playgroud)

但是,q的静态值有效:

$('a.menu_help').qtip({
    content: {
      url:'my_ajax_controller.php',
      data: 'type=help_menu&q=toto',
      method: 'get'
    },
    show: 'mouseover',
    hide: 'mouseout'
});
Run Code Online (Sandbox Code Playgroud)

有没有办法将动态值传递给参数数据?

提前致谢 !

弗洛朗

ajax jquery qtip

4
推荐指数
1
解决办法
5800
查看次数

jquery qTip:让标注留在那里

如何在页面加载时进行qTip标注显示,并且即使我将鼠标悬停在字段上也会保持在那里.从本质上讲,我只想要一个固定的标注,并使用qTip轻松定位和造型.

注意:我尝试了"show:{ready:true}"设置,但这只是最初呈现的标注.如果一个悬停在相关目标字段上,则呼出消失.我需要它来显示显示的时间段.

谢谢

PS我正在使用最新的1.*(稳定版).

添加

  hide: { when: 'mouseout', fixed: true },   
Run Code Online (Sandbox Code Playgroud)

由于某种原因似乎没有帮助,也没有

  hide: {fixed: true }
Run Code Online (Sandbox Code Playgroud)

也许我使用这些选项错了?

jquery qtip

4
推荐指数
1
解决办法
578
查看次数

右键单击Cytoscape js qtip

我试图在节点的右键单击事件上显示qtip.我已经在鼠标悬停或点击事件上做了它们并且他们工作了.但是我不能让它在右键单击上工作.

position: {
    my: 'top left',
    at: 'bottom right',
    adjust: { method: 'none' }
},
style: {
    classes: 'qtip-rounded'
},
show: {
    event: 'mouseover'
}
Run Code Online (Sandbox Code Playgroud)

任何猜测?我也检查了这个:http://qtip2.com/guides#events.rightclick 它对我不起作用.

谢谢,Olivér

qtip qtip2 cytoscape.js

4
推荐指数
1
解决办法
1478
查看次数

为什么qTip工具提示保持打开状态,以便我可以点击它上面的链接?

这是我在jsfiddle中的示例,将鼠标悬停在明尼苏达州以查看qtip弹出窗口.我正在使用 qTip jquery插件,我不得不让qtip保持足够长的时间让某人点击工具提示上的链接.我在scenerios上试过各种各样的东西让它保持开放.阅读文档似乎很容易,但我尝试了这些并没有运气.我试过这些

hide: { when: 'mouseout', fixed: true }
Run Code Online (Sandbox Code Playgroud)

hide: { fixed: true, delay: 1000 }
Run Code Online (Sandbox Code Playgroud)

还有很多其他的东西都没有保留工具提示,因此用户可以点击链接.令人恼火的是参考页面上的内容.如果你点击任何一个示例链接他们正在做我想做的事情,我去了源,如果看起来他们正在使用

  hide: 'unfocus',
Run Code Online (Sandbox Code Playgroud)

     hide: {
        fixed: true,
        delay: 240
     },
Run Code Online (Sandbox Code Playgroud)

但我试过了两个,工具提示不会保持打开状态.我错过了什么吗?

javascript jquery jquery-plugins qtip

3
推荐指数
1
解决办法
3709
查看次数

qtip泡泡造型

我刚刚为JQuery选择了qtip2插件,似乎无法根据他们的示例使用该样式.也许我不理解什么?

这是他们加载6个默认可用主题的示例,但它不会改变任何内容,无论我使用的是奶油色,红色,深色,浅色,蓝色还是绿色.我只是不断获得默认的奶油主题.从qtip 1x开始,这些应该已经可以使用了吗?

$("jqueryselector").qtip({
   content: 'Dark themes are all the rage!',
   style: { 
      name: 'dark' // Inherit from preset style
   }
});
Run Code Online (Sandbox Code Playgroud)

我的代码在JQuery中如下:

$(function(){
    $('a['title']).qtip({style:{name:'red',tip:true}}); // picked up from the getting started page
});
Run Code Online (Sandbox Code Playgroud)

jquery jquery-plugins qtip

3
推荐指数
1
解决办法
5281
查看次数

如何在点击时显示工具提示

我正在尝试使用qtip2.我的问题是我只想在用户点击href内部指定的html 时显示工具提示.所以我试试这个:

function help(){
    var link = document.getElementById('helps');
    if(link.innerHTML=="Open"){
        $('#helps').qtip({
           content: {
              text: 'I get shown on click'
           },
           show: {
              event: 'click'
           }
        });
    link.innerHTML = "Close";
    }else{
        link.innerHTML="Open";
    }
}
<a href="javascript:help()" id="helps">Open</a>
Run Code Online (Sandbox Code Playgroud)

我的问题是,当我点击时,文字变为Close但工具提示不显示.当我再次单击文本时Open,我会看到工具提示.我能做什么?

jquery tooltip qtip

3
推荐指数
1
解决办法
7428
查看次数

是否可以通过函数调用显示qtip?

我目前正在尝试创建一个文本选择脚本,以便人们可以标记文本,然后将其插入到表单中.

因此,我想显示一个带有"发送到表单"链接的弹出窗口,但是我在创建一个带有qtip的工具提示时遇到了问题(我在我的网站上的任何地方都使用它)从我的脚本中找出文本是否已被标记(如果我的脚本无法复制任何内容,则不会有链接).

我正在使用此脚本进行选择检测:http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html

如果当前有一个a alert,则稍后将调用qtip:

Kolich.Selector.mouseup = function(){
    var st = Kolich.Selector.getSelected();
    if(st!=''){
        alert("You selected:\n"+st); // here will be showQTipAtMouseButtonFixed()
    }
}
Run Code Online (Sandbox Code Playgroud)

现在问题似乎是整个qtip都集中在悬停上.我当然可以围绕.qtip()调用包装一个函数,但这并没有真正解决问题.然后工具提示将附加到我的功能,并且只有当我悬停它所连接的元素仍然显示.

这将是包装函数的qtip

function showQTipAtMouseButtonFixed() {
    $('#content').qtip({
        content: 'Hello!',
        position: {
            target: 'mouse',
            adjust: { mouse: false }
        },
        hide: {
            fixed: true
        },
        style: {
            tip: true,
            classes: 'ui-tooltip-red'
        }
    });
}
Run Code Online (Sandbox Code Playgroud)

使用this而不是"#content"(我在相关帖子中看到)也不起作用.

但是我希望它在背景中始终处于活动状态,并在Kolich.Selector说"现在你被显示了!"时显示.

我还show: 'click' 通过Google找到了一个提示,但这也不是解决方案.它只适用于您真正假设点击的情况,但在我的情况下,它更像是双击或鼠标移动或键盘.

这可能与qtip或我必须display从头开始使用CSS 吗?

qtip

3
推荐指数
1
解决办法
3689
查看次数

Web辅助功能和qTip

我最近实现了qTip jQuery插件,我非常喜欢它.在最近与我的老板进行代码审查时,Web Accessibility出现在讨论中,特别是qTip得到了解决.

目前我有qTip工作,当我将鼠标悬停在支持qTip的网页上的某些图标上时,会为用户显示工具提示.嗯,这适用于使用鼠标的人,但对于那些只使用键盘的人来说,那是行不通的......

我已经开始对Web Accessibility进行一些研究,我主要在W3C上阅读材料.

我想要做的是为qTip启用键盘/屏幕阅读器功能.

你有没有做过任何使qTip与Web Accessibility兼容的工作?

绝对不是在寻找"有人写代码".只是寻找关于使用qTip插件实现Web Accessibility的小例子和任何建议.

accessibility qtip

3
推荐指数
1
解决办法
804
查看次数

Pace.JS Qtip如何忽略佩斯动画

我们如何可以忽略带有Pace.js进度动画的网址到我的ajax调用之一,我按照文档中提到的跟随以下内容,我试图忽略一个网址'getTip',但它仍然触发了节奏动画,

ajax:{trackMethods:['GET','POST'],trackWebSockets:false,ignoreURLs:['arterySignalR','browserLink','getTip']}

或者如何在以下调用中使用Pace.ignore

$("a [name ^ ='qtipname']").each(function(){

        var $this = $(this);
        var id = $this.attr('rel');
        $this.qtip({
            content:{
                text: 'Loading...',
                ajax:{
                    url: urlTip,
                    type: 'GET', 
                    loading: false,
                    data: {"objectID": id}
                }
            },
            show: 'mouseover', // Show it on mouseover
            hide: {
                delay: 200,
                fixed: true // We'll let the user interact with it
            },
            style: {
                classes: 'ui-tooltip-light ui-tooltip-shadow',
                width: 290 
            }
        });
Run Code Online (Sandbox Code Playgroud)

javascript jquery qtip

3
推荐指数
1
解决办法
2135
查看次数

如何使用QTip访问触发元素?

我有一个分配给元素的QTip,如下所示:

$('#myDiv').qtip({
            show: { when: { event: 'click', } },
            hide: { when: { event: 'unfocus' } },
            style: {
                  border: {
                     width: 5,
                     radius: 10
                  },
                  padding: 10, 
                  textAlign: 'center',
                  tip: true, // Give it a speech bubble tip with automatic corner detection
                  name: 'red' // Style it according to the preset 'cream' style
            },
            position: {
                corner: {
                 tooltip: 'topMiddle', // Use the corner...
                 target: 'bottomMiddle' // ...and opposite corner
                }
            },
            content: {
               text: self.parent('.qtip').html(),
               title: { …
Run Code Online (Sandbox Code Playgroud)

javascript jquery qtip

2
推荐指数
1
解决办法
1137
查看次数