如何删除在jquery中悬停生成的工具提示

I have used hover to display tooltip on hover. However the text keeps getting appended because the function I have written on mouseout is not working.

我用悬停在悬停时显示工具提示。但是,由于我在mouseout上编写的函数不起作用,因此文本会不断添加。

Below is my code:

以下是我的代码:

var $j = jQuery.noConflict();

$j("#choice30QID404").hover(
function () {
   // $j(this).append($("<span> HOVERING!!!!! </span>"));
    $j(this).append("<span>HOVERING!!!!!</span>");
});              

$j("#choice30QID404").click(function() {
  $j(this).mouseout();
});

4 个解决方案

#1

You can achieve this simply using title attribute. Unless and until you don't want to customize. I am writing without noConflict()

您只需使用title属性即可实现此目的。除非你不想自定义。我写的没有noConflict()

$('#choice30QID404').mouseover(function() { 
$(this).attr('title','You are Hovering'); 
})

$('#choice30QID404').mouseout(function() { 
$(this).removeAttr('title'); 
})

This will help you.

这对你有所帮助。

#2

Do you want something like this.

你想要这样的东西吗?

Try this

Script

  var $j = jQuery.noConflict();

  $j("#choice30QID404").hover(
  function () {
     // $j(this).append($("<span> HOVERING!!!!! </span>"));
      $j(this).append("<span class='span1'>HOVERING!!!!!</span>");    
  });              

  $j("#choice30QID404").mouseout(function() {
    $j(this).find('.span1').remove();
  });

HTML

<div id="choice30QID404">
Hover on this
</div>

Working Demo

#3

Try This -->

试试这个 - >

You can append a on mouse hover and on mouseout remove that

您可以在鼠标悬停上添加鼠标悬停并删除它

var $j = jQuery.noConflict();

$j("#choice30QID404").hover(
  function() {
    // $j(this).append($("<span class='prepended'> HOVERING!!!!! </span>"));
    $j(this).append("<span class='hovering'>HOVERING!!!!!</span>");
  });

$j("#choice30QID404").mouseout(function() {
 // $j(this).mouseout();
  $j(".hovering").remove();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="javascript:void(0)" id="choice30QID404">Hello<a>

#4

You have appended DOM children to your element with the id of choice30QID404. You can then remove it on a .mouseout() event (reference).
JQuery helps with .children().remove().

您已将DOM子项附加到您的元素,其id为choice30QID404。然后,您可以在.mouseout()事件(引用)上将其删除。 JQuery帮助.children()。remove()。

var $j = jQuery.noConflict();
var $choice = $j("#choice30QID404");

$choice.hover(function () {
  $j(this).append("<span>HOVERING!!!!!</span>");
});              

$choice.click(function() {
  $j(this).mouseout();
});

$choice.mouseout(function() {
  $j(this).children().remove();
});

I hope this helps,

我希望这有帮助,

Rhys

#1