Home/ Questions/Q 6063557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T09:10:45+00:00

I’m following this tutorial to add a simple jquery tooltip. The tutorial uses three

  • 0

I’m following this tutorial to add a simple jquery tooltip. The tutorial uses three images to construct the tooltip background but I only want to use one. Right now I’m trying to make the tooltip appear when I hover over certain text. I don’t know if I’m making a simple mistake or if the code doesn’t make sense. Either way, the tooltip won’t appear when I hover over the text.

Here is my version of the script:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.toolTip').hover(
    function() {
    this.tip = this.title;
    $(this).append(
     '<div class="toolTipWrapper">'
        +'<div class="toolTipPic">'

          +this.tip
       +'</div></div>'
    );
    this.title = "";
    this.width = $(this).width();
    $(this).find('.toolTipWrapper').css({left:this.width-22})
    $('.toolTipWrapper').fadeIn(300);
  },
    function() {
      $('.toolTipWrapper').fadeOut(100);
      $(this).children().remove();
        this.title = this.tip;
      }
  );
});
</script>

<style type="text/css">
.toolTip {}
.toolTipWrapper {
        width: 175px;
        position: absolute;
        top: 20px;
        display: none;
        color: #FFF;
        font-weight: bold;
        font-size: 9pt;
}
.toolTipPic {
        width: 175px;
        background: url(tooltip.png) no-repeat;
}

</style>
</head>
<body>
<p class="toolTip" title="This is the tooltip text">Hover over me for tooltip </p>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    On this line:

    $(this).find('.toolTipWrapper').css({left:this.width-22});

    You setting the left property to the width of the p tag, but you haven’t set a width on the p tag so its width is the whole width of the page. For example when I tired this it set left to ‘1247px’ which was of to the side of the browser window.

    • 0