jquery homemade Cue box tooltip improved version _jquery

The response speed of the cue effect with the title is very slow, using jquery homemade hints tooltip!

Html:

<p><a href= "#" title= "hyperlink hint 1" class= "tooltip" > Hint 1</a></p> <p><a
"#" title = "hyperlink hint 2" class= "tooltip" > Hint 2</a></p>
<p><a href= "#" title= "self-hyperlink hint 1" > self-hyperlink hint 1< /a></p>
<p><a href= "#" title= "Tip 2 with HYPERLINK" > self-linking hint 2</a></p>

Css:

  P a{display:block;width:150px;height:50px;line-height:50px;
    Background: #FF3366; color: #fff; border-radius:3px;text-align:center;}
  #tooltip {position:absolute;width:200px;height:50px;line-height:50px;border:1px solid #ccc; text-align:center; box-shadow:1px 1px 2px #ccc background: #fff; border-radius:5px;}

JQ:

$ (function () {
    var x=10,y=20;//allows the mouse to deviate from the ToolTip distance of
    $ ("A.tooltip"). MouseOver (function (e) {
      this.mytitle=this.title;//get title, temporary storage
      this.title= ""; avoid and native hints repeat

      var tooltip= "<div id= ' tooltip ' >" + This.mytitle+ "</div>";
      $ ("Body"). Append (tooltip);
      CSS () set style
      $ ("#tooltip"). CSS ({
        "top":(e.pagey+y) + "px",//e.pagex relative to the document, E.clientx relative to the visual area
        "left":( E.PAGEX+X) + "px",
      }). Show ("Fast");
    Mouseout (function () {
      this.title=this.mytitle;//redo
      $ ("#tooltip"). Remove ()//Remember to remove the generated node
    }). MouseMove (function (e) {
      $ ("#tooltip"). CSS ({
        "left":(e.pagex+x) + "px",
        "top":(e.pagey+y) + "px",
      });
    });
  });

Improved version: The above tooltip content plus a picture Preview!

JQ:

$ (function () {
    var x=10,y=20;
    $ ("A.tooltip"). MouseOver (function (e) {
      this.mytitle=this.title;
      This.title= "";
      var imgtitle=this.mytitle? " <br/><span id= ' Tooltipspan ' > ' +this.mytitle+ ' </span>: ' ";
      var tooltip= "<div id= ' tooltip ' > "+imgtitle+" </div> ";
      $ ("Body"). Append (tooltip);
      $ ("#tooltip"). CSS ({
        "top":(e.pagey+y) + ' px ',
        ' left ':(e.pagex+x) + ' px ',
      }. Show ("Fast");
    Mouseout (function () {
      this.title=this.mytitle;
      $ ("#tooltip"). Remove ();
    }). MouseMove (function (e) {
      $ ("#tooltip"). CSS ({
        "top":(e.pagey+y) + "px",
        "left":(e.pagex+x) + "px",
      })
    });
  });

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.