热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jQuery:如何删除醉意的工具提示?-jQuery:Howtoremovethetipsytooltip?

Iaddthetipsytooltiptodivswiththe.placeTakenclass.Theusercanthendragboxesaround,so

I add the tipsy tooltip to divs with the .placeTaken class. The user can then drag boxes around, so I remove the class and add it to a new div instead. When this happens, I add a new tipsy tooltip to that div and that works fine, but I want to remove the old one.

我使用.placeTaken类将divy工具提示添加到div。然后用户可以拖动框,所以我删除了类并将其添加到新的div中。当发生这种情况时,我向该div添加了一个新的醉意工具提示,并且工作正常,但我想删除旧的。

They say if you wish to remove the tooltip by setting the title attribute to an empty string, set the original-title attribute instead. I tried $("#"+dropFromId).attr("original-title", ""); but the tooltip is still there. I can't even change the tooltip title by setting another original-title.

他们说如果您希望通过将title属性设置为空字符串来删除工具提示,请改为设置original-title属性。我试过$(“#”+ dropFromId).attr(“original-title”,“”);但工具提示仍在那里。我甚至无法通过设置另一个原始标题来更改工具提示标题。

What am I doing wrong?

我究竟做错了什么?

Edit: I guess I didn't give you guys enough information. I use ajax to grab the places that are taken from the database. The PHP returns an associative array (customers) that I then use in my Javascript where the taken place matches a name. The places that are taken changes when dropping, so I perform the ajax function again to update the array with all the taken places. At fist, I add the tipsy tooltip to all the taken places like so

编辑:我想我没有给你们足够的信息。我使用ajax来获取从数据库中获取的位置。 PHP返回一个关联数组(客户),然后我在我的Javascript中使用,其中发生的地方与名称匹配。删除时所采取的位置会发生变化,因此我再次执行ajax函数以使用所有拍摄的位置更新数组。首先,我将醉意的工具提示添加到所有拍摄的地方,如此

$("#map div.placeTaken").tipsy({gravity: 'w', html: true, fade: true, title:
    function(){
        // id could for example be map74, substring to 74
        var id = $(this).attr("id").substring(3,6);
        return '
'+customers[id]+'

'; } });

So the title is equal to what matches that place in the array. I hope that I am explaining this good enough. When the box is dropped in a new place, this is what happens

所以标题等于数组中匹配的位置。我希望我能够解释这个问题。当盒子放在一个新的地方时,就会发生这种情况

$("#map div span").bind( "dragstop", function(event, ui) {
        // some code here to change the .placeTaken class       
        // update database with the new place
        $.ajax({
            type: "POST",
            url: "map.php",
            data: "dropFromId="+ dropFromId.substring(3,6) +"& dropToId="+ dropToId.substring(3,6),
            success: function(){
            // ajax function to update the js array with new places
            customerTooltip(); 
            }
        });

        // on this place, add tooltip
        $("#"+dropToId).tipsy({gravity: 'w', html: true, fade: true, title:
            // funktion för att avgöra vilken title som ska användas
            function(){
                var id = dropToId.substring(3,6);
                return '
'+customers[id]+'

'; } }); } });

This all works fine, so I thought that I'd simply change the dropFromId title to "" on the drop, so that I remove it.

这一切都很好,所以我认为我只需将DropFromId标题更改为“”,以便我删除它。

9 个解决方案

#1


26  

Using $(".tipsy").remove(); seems to do the trick since a div with a tipsy class is appended to the body of the doc when the tooltip is shown.

使用$(“。tipsy”)。remove();似乎可以解决这个问题,因为当显示工具提示时,带有提示类的div会附加到doc的主体上。

Just be sure you don't use a tipsy class elsewhere (i.e. call your tooltip's something like toolTip instead)

请确保您不要在其他地方使用一个小技巧课程(例如,将工具提示称为toolTip)

#2


11  

The simplest way to remove tipsy ;

删除醉酒的最简单方法;

$('.tipsy:last').remove();

#3


5  

If you don't want the tipsy to show anymore just use .tipsy('disable') on the element.

如果你不想再显示tipsy,只需在元素上使用.tipsy('disable')。

If you are using trigger: manual and you want to hide it you can just remove the .tipsy div on the body.

如果你正在使用trigger:manual而你想要隐藏它,你可以删除身体上的.tipsy div。

There's also disable enable and toggleEnabled

还有禁用enable和toggleEnabled

#4


2  

$("#"+dropFromId)[0].setAttribute('original-title', '')

#5


1  

$("#tipsyfiedElement").unbind('mouseenter mouseleave'); // Or whatever event trigger the tiptool

#6


0  

I recently had this issue, here's how I resolved it:

我最近有这个问题,这是我如何解决它:

Use this to set the original-title attribute to 'stop':

使用此选项将original-title属性设置为“stop”:

$('.myElement').attr('original-title','stop');

Then, in jquery.tipsy.js, change the code to the following:

然后,在jquery.tipsy.js中,将代码更改为以下内容:

...
} else if (typeof opts.title == 'function') {
    title = opts.title.call(this);
}

if (title != 'stop') {    //line 32
    ...
    ...
}                         //line 62
...

In my release (0.1.7) the added code starts at line 32 and ends bracket at line 62. Tipsy should see that your title attribute equals 'stop' and wont try to open the tooltip.

在我的发布(0.1.7)中,添加的代码从第32行开始,在第62行结束括号.Thisy应该看到你的title属性等于'stop'并且不会尝试打开工具提示。

Also, this spits out some error to the console. It doesn't make any difference, but if you want to get rid of it, add this at line 73 (after adding previous code)

此外,这会向控制台吐出一些错误。它没有任何区别,但是如果你想摆脱它,在第73行添加它(在添加以前的代码之后)

try { tip.remove(); } catch(err){}

POW

#7


0  

Use: .unbind('mouseenter mouseleave'); to remove a tipsy method.

使用:.unbind('mouseenter mouseleave');删除一个醉意的方法。

#8


0  

I saw this question after Googling a situation to disable Tipsy when on a mobile device due to complexities with the touch/click event, specifically on iPads.

由于触摸/点击事件的复杂性,特别是在iPad上,谷歌搜索了一个在移动设备上禁用Tipsy的情况之后我看到了这个问题。

The solution I decided to implement was adding a small test at the top of the jquery.tipsy.js file.

我决定实现的解决方案是在jquery.tipsy.js文件的顶部添加一个小测试。

To disable Tipsy on touch (mobile) devices: var deviceAgent = navigator.userAgent.toLowerCase();

要在触摸(移动)设备上禁用Tipsy:var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch ||
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/) ||
deviceAgent.match(/(iemobile)/) ||
deviceAgent.match(/iphone/i) ||
deviceAgent.match(/ipad/i) ||
deviceAgent.match(/ipod/i) ||
deviceAgent.match(/blackberry/i) ||
deviceAgent.match(/bada/i));

function Tipsy(element, options) {
    this.$element = $(element);
    this.optiOns= options;
    this.enabled = !isTouchDevice;
    this.fixTitle();
};

See: The best way to detect if user agent supports touch

请参阅:检测用户代理是否支持触摸的最佳方法

#9


0  

Easier way im using:

使用方式更简单:

$('body').find('.tipsy').each(function(){
    $(this).remove();
});

推荐阅读
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
  • 本文讨论了如何在codeigniter中识别来自angularjs的请求,并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax(),但都没有成功。最后,作者展示了一个ajax请求的示例代码。 ... [详细]
  • 【shell】网络处理:判断IP是否在网段、两个ip是否同网段、IP地址范围、网段包含关系
    本文介绍了使用shell脚本判断IP是否在同一网段、判断IP地址是否在某个范围内、计算IP地址范围、判断网段之间的包含关系的方法和原理。通过对IP和掩码进行与计算,可以判断两个IP是否在同一网段。同时,还提供了一段用于验证IP地址的正则表达式和判断特殊IP地址的方法。 ... [详细]
  • 本文讨论了编写可保护的代码的重要性,包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法,如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道,如不规范的命名、重复代码、过长的函数和参数列表等。最后,介绍了如何处理数据泥团和进行函数重构,以提高代码质量和可维护性。 ... [详细]
  • Postgresql备份和恢复的方法及命令行操作步骤
    本文介绍了使用Postgresql进行备份和恢复的方法及命令行操作步骤。通过使用pg_dump命令进行备份,pg_restore命令进行恢复,并设置-h localhost选项,可以完成数据的备份和恢复操作。此外,本文还提供了参考链接以获取更多详细信息。 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • IOS开发之短信发送与拨打电话的方法详解
    本文详细介绍了在IOS开发中实现短信发送和拨打电话的两种方式,一种是使用系统底层发送,虽然无法自定义短信内容和返回原应用,但是简单方便;另一种是使用第三方框架发送,需要导入MessageUI头文件,并遵守MFMessageComposeViewControllerDelegate协议,可以实现自定义短信内容和返回原应用的功能。 ... [详细]
  • 本文介绍了在MFC下利用C++和MFC的特性动态创建窗口的方法,包括继承现有的MFC类并加以改造、插入工具栏和状态栏对象的声明等。同时还提到了窗口销毁的处理方法。本文详细介绍了实现方法并给出了相关注意事项。 ... [详细]
  • 本文介绍了使用哈夫曼树实现文件压缩和解压的方法。首先对数据结构课程设计中的代码进行了分析,包括使用时间调用、常量定义和统计文件中各个字符时相关的结构体。然后讨论了哈夫曼树的实现原理和算法。最后介绍了文件压缩和解压的具体步骤,包括字符统计、构建哈夫曼树、生成编码表、编码和解码过程。通过实例演示了文件压缩和解压的效果。本文的内容对于理解哈夫曼树的实现原理和应用具有一定的参考价值。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了logistic回归(线性和非线性)相关的知识,包括线性logistic回归的代码和数据集的分布情况。希望对你有一定的参考价值。 ... [详细]
  • 本文讨论了在Windows 8上安装gvim中插件时出现的错误加载问题。作者将EasyMotion插件放在了正确的位置,但加载时却出现了错误。作者提供了下载链接和之前放置插件的位置,并列出了出现的错误信息。 ... [详细]
  • 本文介绍了[从头学数学]中第101节关于比例的相关问题的研究和修炼过程。主要内容包括[机器小伟]和[工程师阿伟]一起研究比例的相关问题,并给出了一个求比例的函数scale的实现。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
author-avatar
cecillalurw_689
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有