Tooltip (jquery)

Question

I am working on a tooltip with Jquery but it isnt working. Could you please help me? I dont understand why it is not working ok...

Thanks!!

    .tooltip{
    padding:5px 10px;
    background-color:#e5f4fe;
    border:#5a5959 1px solid;
    position:absolute;
    z-index:9999;
    color:#0c0c0c;
    font-size:0.688em;
    min-width:100px;
    min-height:50px;
}

.tipBody {
    background-color:#e5f4fe;
    padding:2px;
}

HTML:

<a rel="tooltip" title="Print Results" class="printbtn" href="#">Print results</a>

JQUERY:

   $(document).ready(function() {

    //Select all anchor tag with rel set to tooltip
    $('a[rel=tooltip]').mouseover(function(e) {

        //Grab the title attribute's value and assign it to a variable
        var tip = $(this).attr('title');    

        //Remove the title attribute's to avoid the native tooltip from the browser
        $(this).attr('title','');

        //Append the tooltip template and its value
        $(this).append('<div class="tooltip"><div class="tipBody">' + tip + '</div></div>');        

        //Show the tooltip with faceIn effect
        $('.tooltip').fadeIn('500');
        $('.tooltip').fadeTo('10',0.9);

    }).mousemove(function(e) {

        //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
        $('.tooltip').css('top', e.pageY + 10 );
        $('.tooltip').css('left', e.pageX + 20 );

    }).mouseout(function() {

        //Put back the title attribute's value
        $(this).attr('title',$('.tipBody').html());

        //Remove the appended tooltip template
        $(this).children('div.tooltip').remove();

    });

});

Answer 1

Use css file

span.reqType {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #89A4CC;
  line-height: 16px;
  color: White;
  font-size: 13px;
  font-weight: bold;
  border-radius: 8px;
  text-align: center;
  position: relative;
}
span.reqType:hover { background-color: #3D6199; }
div.tooltip {
  background-color: #3D6199;
  color: White;
  position: absolute;
  left: 25px;
  top: -25px;
  z-index: 1000000;
  width: 250px;
  border-radius: 5px;
}
div.tooltip:before {
  border-color: transparent #3D6199 transparent transparent;
  border-right: 6px solid #3D6199;
  border-style: solid;
  border-width: 6px 6px 6px 0px;
  content: "";
  display: block;
  height: 0;
  width: 0;
  line-height: 0;
  position: absolute;
  top: 40%;
  left: -6px;
}
div.tooltip p {
  margin: 10px;
  color: White;
}

In my case I used span tag with question mark sign. On mouseover it will display result

<span class="reqType ">?</span>

in my js file I used

$("span.reqType").hover(function () {
        var toolVal = $(this); 
        com.trp.nex.component.hrrequestform.showToolTipReqType(toolVal);
    }, function () {
     $("div.tooltip").remove();
    });


my.showToolTipReqType = function(toolVal){
            var selectedVal = $("#type").val();
            var reqType = populateReqType.requestType[selectedVal].description;
            toolVal.append('<div class="tooltip"><p>"'+ reqType + '"</p></div>');
        };

Answer 2

work example

css:

  #message{
        display: none;
    }

jquery:

$("#message").html("Tooltip text");
$("#message").fadeIn(1000, function() {
    $("#message").fadeOut(2000)
});

Answer 3

I changed your codes a lot, it was not fadeingTo and other stuff. here is the edit:

$(document).ready(function() {

    $('body').append('<div class="tooltip"><div class="tipBody"></div></div>');

    var tip; // make it global
    $('a[title]').mouseover(function(e) { // no need to point to 'rel'. Just if 'a' has [title] attribute.

        tip = $(this).attr('title'); // tip = this title   
        $(this).attr('title','');    // empty title
        $('.tooltip').fadeTo(300, 0.9).children('.tipBody').html( tip ); // fade tooltip and populate .tipBody

    }).mousemove(function(e) {

        $('.tooltip').css('top', e.pageY + 10 ); // mouse follow!
        $('.tooltip').css('left', e.pageX + 20 );

    }).mouseout(function(e) {
        $('.tooltip').hide(); // mouseout: HIDE Tooltip (do not use fadeTo or fadeOut )
        $(this).attr( 'title', tip ); // reset title attr
    });

});

And the fiddle DEMO

If you have time to explore I created some tooltip plugins here:

titleClouds

titleGrabber

Answer 4

Your code is OK. You should check if you included jQuery properly, if no other library is affecting the results and if your <a> html exists before selecting it with jQuery