标签: jquery-ui-tooltip

今天,我使用jQuery 1.9.1升级了所有jQuery插件.我开始在jquery.ui.1.10.2中使用jQueryUI工具提示.一切都很好.但是当我在内容中使用HTML标签时(在title我应用工具提示的元素的属性中),我注意到HTML不受支持.

这是我的工具提示的屏幕截图:

如何在1.10.2中使用jQueryUI工具提示使HTML内容有效？

使用jQuery UI工具提示,如果我超过目标,或者如果我超过了工具提示本身,我想保持工具提示处于打开状态.

我想我可以使用close回调来查看我是否超过了工具提示或目标区域,尽管我必须再分配另一个mouseout函数.

这是我的jsfiddle:http://jsfiddle.net/Handyman/fNjFF/

$(function()
{
    $('#target').tooltip({
        items: 'a.target',
        content: 'just some text to browse around in'
    });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="target">
    <a href="#" class="target">Hover over me!</a>
    <a href="#" class="target">Hover over me too!</a>
</div>

我现在正在研究它,看看我能想出什么.

如何才能使新的JqueryUI工具提示仅在focus以下情况下可见:此时它依次focus打开hover.我相信这是自JqueryUI 1.9以来

我更新了我的jQuery文件,包括jquery UI,以使用工具提示功能.

但现在Javascript正在消失,出现以下错误:

TypeError: e.widget.extend is not a function

谁能帮我？

我使用jQuery UI的新工具提示,并且无法弄清楚如何设置工具提示的最大宽度.我想应该用位置来完成,但是如何？

我有一个元素,当它盘旋时,它显示项目的价格(在游戏中).我正在使用jQuery UI工具提示来显示有关每个项目的信息.单击该项时,jQuery捕获单击,使用$ .get()请求来处理购买,并可以通过JSON和jQuery的parseJSON功能返回与项目相关的特定信息.

但是,每件商品的价格随每次购买而变化.这是一种通货膨胀形式.我无法弄清楚如何访问jQuery UI工具提示的内容来更改它的内容,以便在它仍然显示时或者甚至在它不显示时,更改其内容的值以反映新的价格.

我需要做些什么才能实时更改内容？

我正在尝试设置jQuery UI工具提示的样式,但它一直在关闭.我试过以下但没有成功:

 $("td label").tooltip({

    disabled: true,
    close: function (event, ui) { return false; }

 }).on("click", function () {

    $(this).tooltip("open");
 }).off('focusout mouseleave mouseenter');

似乎没有什么能保持开放.当我右键点击它去Firebug时,它在我有机会之前消失了.

我对jQuery UI的工具提示存在定位问题.我宁愿不使用jQuery UI,但我正在研究的项目已经在整个过程中使用它并且已经请求我尝试使用它,而不是集成我的首选选项qTip2.

出现工具提示时,会导致垂直滚动条.我将工具提示集中放在目标上方,这是我想要的,不包括这个问题.

$(function() {
$( document ).tooltip({
show: false,
    hide: false,
  position: {
    my: "center bottom-20",
    at: "center top",
    using: function( position, feedback ) {
      $( this ).css( position );
      $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
    }
  }
 });
});

我可以看到工具提示位于顶部:-600px我假设是导致滚动条出现的原因.

我已经尝试更改/删除工具提示的定位,但它没有任何效果.我已经尝试删除部分CSS来查明问题,它似乎与填充(任何)或高度(最小,最大或固定)有关.

虽然删除填充和高度修复了问题,但它显然让工具提示看起来有点......瘦.我想弄清楚问题是什么,并解决它,所以我可以设置工具提示的样式.

我当前的CSS(包括我可以看到的高度和填充导致问题)如下(还有为箭头设置的样式,我省略了,因为我可以看到它们没有引起任何问题):

.ui-tooltip {
    z-index:10;
    width:150px;
    padding:10px;
    min-height:20px;
    max-width:100%;
    font-size:0.875em;
    text-align:center;
    border-radius: 20px;
    color:#707070;
    background:#fffdc2 url(../img/fade.png) repeat-x;
    font-family: 'Droid Sans', sans-serif;
    text-shadow: 1px 1px #ffffff;
    -webkit-border-radius: 5px; …

试图暂时禁用jQuery工具提示

$(document).tooltip( "option", "disabled", true );

当我尝试再次重新启用它们时,所有title属性都消失了.我试图使用以下方法重新启用它们:

$(document).tooltip( "option", "disabled", false);

该title属性是当我第一次设置它实际上被完全删除disabled到true.

还尝试过:

$(document).tooltip("disable");
$(document).tooltip("enable");

它正在做同样的事情......

更新

在Jasen和zgr024的帮助下找到了我自己的问题的解决方案.见下文.

我正在尝试使用jQuery UI Tooltip,我想我可能会遗漏一些东西.

我希望在不指定title属性的情况下显示最简单的工具提示.

我相信我应该可以在我的javascript中随处调用它:

$('#ContactName').tooltip({ content: 'Hey, look!' }).tooltip('open');

这不起作用.难道我做错了什么？

编辑:我应该提到#ContactName是一个输入[type = text],它在一个jQuery UI对话框中.

编辑2:好的,这有效.不过,我真的不明白为什么.

$($('#ContactName').parent()).tooltip({
    items: '#ContactName',
    content: 'Hey, look!'
});

它适用于悬停.无论如何,我可以用相同的代码立即打开它吗？

编辑3:这是我最终得到的:

            $($('#ContactName')).tooltip({
                items: '#ContactName',
                content: $(this).text(),
                position: {
                    my: 'left+15',
                    at: 'right center'
                },
                tooltipClass: 'ui-state-error'
            }).tooltip("open");