Tag: 工具提示

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

我正在尝试使用qtip2 。 我的问题是，我只想在用户点击内部指定html的href时显示工具提示。 所以我试试这个： 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”; } } Open 我的问题是，当我单击时，文本变为Close但工具提示不显示。 当我再次单击时，文本变为Open ，我看到工具提示。 我能做什么？

jQuery Tooltip仅适用于表的第一行

jQuery工具提示非常适合我表中的第一行数据。 之后，我只在IE和FF中获得旧学校窗口默认工具提示。 以下是构建表数据的HTML： foreach ($displayData as $row) { echo ”; echo ”.$row[“TSTRTP”].”; echo ”.$row[“TSTRLC”].”; echo ”.$row[“TSADDR”].”; echo ”.$row[“TSDATE”].”; echo ”.$row[“TSTIME”].”; echo ”.$row[“TSCOST”].”; echo ”; echo ”; echo ”; echo ”.$row[“TSCITY”].’,’.$row[“TSST”].’ ‘.$row[“TSZIP”].”; echo ”; echo ”; $a = !$a; } 这是我的javascript： $(document).ready(function(){ $(‘#fancy’).tooltip({ track: true, delay: 0, showURL: false, fixPNG: true, showBody: ” – “, top: […]

不使用属性的jQuery Tooltip

我正在寻找一个不使用属性的jQuery工具提示插件。 到目前为止，我尝试了一些变化，包括; Tooltipster，PowerTip，jTip和TipTip！ 它们都有效但在IE8中都不能正常工作（这是必须的）。 它们也都使用属性。 我需要能够在包含块中使用其他标签，例如 等，因此不需要使用 。 使用 或类似的插件将是完美的，因为我可以自定义我想要的方式并使用相关的标签。 我搜索，搜索和搜索但找不到任何东西，所以如果有人知道，我会非常感激！

在视口中保持一个绝对定位的元素（jquery）

我现在正在一个网站上工作，有很多工具提示。 我想确保工具提示始终在视口中完全显示。 我知道有工具提示的插件，但它们不适合我，因为工具提示是通过css完成的（我不能改变所有这些！）。 你想获得工具提示的任何元素都有一个位置：relative，紧接着是一个带有class =’tooltip’的元素 – 这里是css代码： .tooltip{ display:none; color: #262626; background-color: #FEFEE0; padding: 5px 12px; position: absolute; box-shadow: 0 0 5px #A6A6A6; margin-top:-8px; z-index: 1000; } *:hover + .tooltip { display:block ! important; } .tooltip:hover{ display:block; } 我想做的是，每次显示工具提示时（或每次工具提示之前的元素都hover），运行一个函数来计算偏移并确保它适合屏幕（或移动它，如果没有） 。 我现在唯一想到的就是我没有尝试过这样的事情： $(“*:hover”).each(function(e){ if ($(this).next().hasClass(‘tooltip’) //run some positioning function } 好吧，所以我不是jquery专家，可能是上面的马车，我还没试过，但你明白了。 但它有意义吗？ 它会影响性能（以不好的方式）吗？ 我花了好几个小时研究这个并且空洞。 任何想法非常感谢！

将工具提示保留在浏览器窗口中？ （不使用插件）

我的工具提示代码如下： HTML / CSS a.tooltip span { display: none; padding: 5px; border: 1px solid #000; background: #999; position: absolute; color: #fff; text-align: left; } [Help]This is the tooltip jQuery的： $(‘a.tooltip’).hover( function(e) { $(this).children(‘span’) .css(‘display’, ‘block’) .css(‘width’, ‘300px’) .css(‘left’, e.pageX + 10) .css(‘top’, e.pageY + 10).show(); }, function() { $(this).children(‘span’).hide(); } ).click(function() { return false; }); […]

如何使用光标移动qtip工具提示

我正在使用js库qtip工具提示。 当我将鼠标hover在表格中的hover行上时，我想使用我的光标移动qtip工具提示。 我知道如何使用我的光标移动自己的工具提示，但我正在努力使用qtip。 请解释你回答的代码。 谢谢 我的HTML： Total Credits 我可以使用以下jquery代码创建一个普通的工具提示（没有qtip js lib）来跟踪我的光标 $(document).ready(function() { $(‘.hover’).mousemove(function(e) { var hovertext = $(this).attr(‘hovertext’); $(‘#hoverdiv’).text(hovertext).show(); $(‘#hoverdiv’).css(‘top’, e.clientY+10).css(‘left’, e.clientX+10); }).mouseout(function() { $(‘#hoverdiv’).hide(); }); }); 以及显示静态qtip工具提示的代码： $(document).ready(function() { $(‘.hover’).each(function() { $(this).qtip({ content: $(this).attr(‘hovertext’) }); }); }); 这是我到目前为止所尝试的： $(document).ready(function() { $(‘.hover’).mousemove(function(e) { $(this).qtip({ content: $(this).attr(‘hovertext’) }); $(”).css(‘top’, e.clientY+10).css(‘left’, e.clientX+10); }); });

用于动态直播活动的Tipsy jquery插件不起作用

我正在使用tipsy jquery插件为动态显示的元素创建工具提示。 工具提示适用于非动态元素，所以我肯定包含了我需要的所有内容。 我正在使用jquery 1.5.1 这是我的jquery代码： $(‘.voted-user-image’).tipsy({gravity:’s’, live: true}); 这是一个图像链接元素的html，它在单击一个触发AJAX请求的链接后在div中动态显示： ` 如何让这个工具提示插件工作？

Bootstrap工具提示不显示

我试图在我的应用程序中使用Bootstrap 工具提示 。 目前，我有以下内容： Tooltip on left 不幸的是，我的工具提示没有显示。 我想弄清楚我做错了什么。 我知道它可以通过JavaScript创建。 但是，我正在尝试以声明方式定义我的工具提示。 我已经确认包含了Tooltip.js文件。 但是，我无法弄清楚我做错了什么。 是否可以在纯粹的声明意义上使用工具提示？ 如果是这样，有人可以通过JSFiddle或Bootply样本向我展示如何？ 我真的很想看这个。

jQuery qTip：如何将单个工具提示div附加到多个目标div？

jQuery qTip插件的正常行为是为每个分配的工具提示项创建一个新的隐藏div。 有没有办法将单个隐藏的工具提示元素绑定到多个目标，以避免混乱DOM？ 受挫的例子： $(“#foo1,#foo2”).qTip({“content”:”test”}); test test 如果qTip无法做到这一点，任何人都可以推荐另一个基于jQuery的工具提示插件，它只使用一个工具提示容器支持丰富的HTML？ 谢谢！

如何正确地将工具提示与jQuery Validate集成

我有以下代码用于在工具提示中显示validation错误： Base Address: . . . $(“#NATIPRangeForm”).validate({ rules: { ip: { required: true, min: 0, max: 255, number: true } }, showErrors: function (errorMap, errorList) { $.each(this.successList, function (index, value) { return $(value).popover(“hide”); }); return $.each(errorList, function (index, value) { var _popover; console.log(value.message); _popover = $(value.element).popover({ trigger: “manual”, placement: “bottom”, content: value.message, template: “” }); […]