【问题标题】:What am I doing wrong with this jQuery tooltip behavior?这个jQuery工具提示行为我做错了什么?
【发布时间】:2011-04-09 01:39:28
【问题描述】:

(编辑)当前行为是悬停时不显示工具提示。不是默认的 html 标题或 jquery 工具提示(/edit)

我在网页上有一个日历。当一天有一个事件并且您将鼠标悬停在它上面时,会显示 html 标题属性,其中包含用逗号分隔的事件名称。当一天有 20 个事件时,这将开始看起来很丑,所以我想使用 jQuery 以不同的方式显示。这是我用于显示工具提示的代码(我在使用 $ for jQuery 时遇到了问题,因为我不了解页面上其他 jQuery 脚本之间的冲突内容,并且将其全部输入似乎可以正常工作):

jQuery(function(){
        var tip = jQuery("#tip");

        //on hover of links with a class of "eventful"
        jQuery(".eventful a").hover(function(e){

            //pull the title attribute into variable "tip"
            tip.text(jQuery(this).attr("title"));

            //make the default title blank
            jQuery(this).attr("title", "");

            //place the new title with css
            tip.css("top",(e.pageY+5)+"px")
                .css("left",(e.pageX+5)+"px")
                .fadeIn("slow");

        }, function() {
                //on mouse out remove
                jQuery("#tip").fadeOut("fast");

                //replace the default title
                jQuery(this).attr("title", tip.html());
        });
    });

这不起作用,所以我不确定我在那里做错了什么。但是在显示工具提示后,我需要更改多个逗号分隔事件的显示方式,最好更改为无序列表。我在下面有这个 sn-p,它可能会将项目分隔成一个数组,也可能不会,在每个逗号处断开字符串:

var titleArray = $(".eventful").attr("title").split(",");

如果这确实有效,我不确定如何将其合并到 ul 中。非常感谢您对此的帮助!

【问题讨论】:

标签: jquery arrays jquery-tooltip


【解决方案1】:

tip div 应该有position:absolute 样式并且它的z-index 应该大于页面中的其他元素。添加jQuery("#tip").css('z-index',somehighvalue)

【讨论】:

  • 这有帮助,谢谢。我想我现在的问题是定位。此 div 包含在小部件区域内,我相信使用 pageY 和 pageX 会导致 div 位于小部件区域边界之外,因此不可见。有没有办法在不使用 pageY 和 pageX 的情况下定位 div?我正在使用的网站位于 dev.adabible.org,日历位于主页的左下方。感谢您到目前为止的帮助。
  • 重新审视这个问题后,我意识到我不应该将我的#tip div 放在我的小部件区域内。我把它放在外面,现在一切都很好了。谢谢!您对如何将一组项目变成无序列表有什么建议吗?
  • 是的!太感谢了!那工作得很好。我只需要进行一项更改,那就是将第二个
  • 标记变为结束
  • ,因为我正在显示一个额外的空列表项。再次感谢!
猜你喜欢
相关资源
最近更新 更多
热门标签