标签: jquery-ui-tooltip

我正在尝试使用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");

我对JQuery UI工具提示小部件编写了以下扩展名，该扩展允许工具提示具有从HTMLElement的html获取其内容的上下文。但是，我已经对'title'属性进行了硬编码，但是我想使用options.items中定义的任何属性。例如，如果他们希望工具提示使用alt标签，那么扩展将使用html内容填充该属性。

我也在寻找正确转义contentId字符串连接的jQuery ui方法

$(function() {
    (function() {
        var cache = {};
        $.widget("custom.tooltipContent", $.ui.tooltip, {
            _init: function() {
                this._super();

                this.options.content = function() {
                    return $(this).attr("title");
                };

                this.element.attr("title", function() {
                    var contentId = $(this).attr("data-tooltip-content");

                    if (!cache[contentId]) {
                        cache[contentId] = $("[data-tooltip-content-id=" + contentId + "]").remove().html();
                    }

                    return cache[contentId];
                });
            }
        });
    })();
});

http://jsfiddle.net/5d7sqx89/1/

更新:仍在寻找可行的解决方案,但请查看下面的答案,它可能会帮助您或给您一个想法.它适用于特定的分辨率.

我正在使用jQuery UI工具提示插件,但我无法按照我想要的方式定位工具提示.

我希望它垂直居中于鼠标,但是位于相关元素的左侧.我相信我的措辞是正确的,但我会告诉你一张我的意思.

(这是应该做的)
http://prntscr.com/v2yqi

正如您在我的示例中所看到的,它垂直居中于元素本身,而不是鼠标.

如果它可以用鼠标移动(仅垂直跟踪),这将是完美的.不确定这个插件是否可以实现.我真的不了解他们的定位API.

这是一个JSFiddle.

  $(function() {
    $( document ).tooltip({
      items: ".entry",
      position: { my: "center", at: "left" },
      content: function() {
        var element = $( this );
        if ( ( element.is( ".entry" ) ) ) {
          return "<div class='hi'>This is a very nice entry! It's so pretty and I feel     like I can touch it. This is just random filler text to give you the idea..</div>"; …

我正在尝试使用jQuery UI Tooltip和以下代码自定义工具提示的位置:

$(".karma").tooltip({
  position: {
    my: "center bottom",
    at: "right top"
  }
});

但无论我对"我的"和"在"做什么都没有改变.我究竟做错了什么？

这是jQuery Tooltip API位置部分的链接

我试图动态地将工具提示文本设置为容器(div),并使用jQuery为每个div元素(elem.Alias-Status)添加到有序列表中:

 function addNewElement(elem) {

     var li = $("<li></li>");

     li.prop("class", "ui-state-default");
     li.prop("id", elem.Alias);
     li.text(elem.Name);

     var newItem = '<div id="' + elem.Alias + '-Status" class="elementStatus" tooltipText="' + elem.IP + '"><div class="image"><img id="' + elem.Alias + '-StatusImg" src="@Url.Content("~/images/ongoing.gif")"></div><div id="' + elem.Alias + '-StatusTxt" class="text">Waiting...</div></div>';
     //$('#' + elem.Alias + '-Status').prop('tooltipText', elem. IP);

     li.append(newItem);

     li.appendTo($("#OuterDivContainer"));       
 };

但它显然不起作用.在运行时,当我将鼠标悬停在每个鼠标上时,不会显示任何工具提示.而且......我不知道该怎么做.我需要在创建项目的同时在此函数中创建它.

从另一个迭代所有项(元素)的函数调用上面的函数.然后此函数作为参数elem传递给addNewElement函数.

有任何想法吗？

我使用的是jquery-ui 1.10.3和jquery 1.10.2

我想显示列出信息的相关工具提示,相关工具提示和信息在表格中的相同单元格中.我不想为此使用插件.当onmouseover到任何链接时,显示相关的工具提示,如果onmouseover到工具提示框,工具提示框将不会关闭.当除了工具提示框或相关链接在页面上的任何区域外,工具提示框将关闭.我想制作一个简单的工具提示,就像这个插件http://stevenbenner.github.io/jquery-powertip/ (鼠标到弹出示例).没有使用插件有没有一个简单的方法？

HTML

<table width="600">
<tr>
    <td>                                  
        <a href="#" class="link">Link-1</a>
        <div class="tooltip">(1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    </td>
</tr>
<tr>
    <td>                        
        <a href="#" class="link">Link-2</a>
        <div class="tooltip">(2) when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining …

我有一个jquery工具提示的奇怪问题.我正在使用下面的代码

<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
  $(function() {
    $(".tooltip").tooltip({ position: { my: "left-30 center+15", at: "right center" } },{ tooltipClass: "custom-tooltip-styling" });
  });
  </script>
</head>
<body>
<a href="link" class="addon_link tooltip" title="test1">test1</a>
<a href="link" class="addon_link tooltip" title="test2">test2</a>
<a href="link" class="addon_link tooltip" title="test3">test3</a>
<a href="link" class="addon_link tooltip" title="test4">test4</a>
</body>
</html>

工具提示工作正常,但在显示标题后将它们添加到页面,并放入这样的div

<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test1</div></div>
<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test2</div></div>

我的页面采用以下形式

<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <script>
      $(function() {
        $(".tooltip").tooltip({ position: { my: "left-30 center+15", at: "right center" } },{ …

我试图实现以下,无法弄清楚如何.我在页面上有几个工具提示,但我希望每个工具提示看起来不同(例如,根据严重程度).这是我到目前为止:

<div id="container">
<a href="#" title="Tooltip 1" data-severity="warning">Tooltip 1 (Warning)</a>
<a href="#" title="Tooltip 2" data-severity="danger">Tooltip 2 (Danger)</a>
</div>

<script type="text/javascript">
// init tooltip
ArrowToolTip.init('container');
</script>

/*JAVASCRIPT*/
var ArrowToolTip = {
init: function (parentId) {
    jQuery('#' + parentId).tooltip(
    {
        content: function () {
            var element = jQuery(this);
            return element.attr('title');
        },
        create: function () {
            var element = jQuery(this);

            var severity = element.data('severity');

            if (!severity) {
                severity = 'default';
            }

            element.tooltip('option', 'tooltipClass', severity);
        },
        open: function(event, ui) {
            var element = jQuery(this); …

我正在使用jquery-1.9.1.js和UI jquery-ui-1.10.3.custom.min.js.当我将鼠标悬停在任何表单元素上时,它会显示工具提示并在鼠标输出时消失.但我想在该项目的点击事件上消除该工具包,因为在我当前的场景中它显示了按钮的工具提示,即使在按钮点击后它仍然存在.因此它在页面上看到多个工具提示.我需要在点击后立即隐藏它们.(下面是屏幕截图).

我使用下面的代码,但不适合我

 $(document).click(function() {
       $(this).tooltip( "option", "hide", { effect: "explode", duration: 500 } );
        });

如何解决这个问题帮助.

编辑

我正在使用更新面板.会产生问题吗？

我有一个带有 jQ​​uery UI 工具提示的页面，该页面最初打开，并且关闭mouseout事件被禁用。

现在，我希望工具提示在用户单击它本身后关闭，而不是在显示工具提示的元素上关闭（正如此处的许多其他答案）。

作为可能的解决方案之一，我认为我可以click向工具提示的 div 添加一个处理程序并从那里关闭它。但我找不到使用 Tooltip 小部件 API 获取工具提示的 div 或以其他方式附加处理程序的标准方法。

我采用上述方法是否走在正确的轨道上？或者如何以不同的方式实现我所追求的目标？

JSFiddle说明了我目前所拥有的内容。