jquery-balloons

All,

 I am using  jquery-balloons and  having trouble hiding the balloons onpage load .  Everything else seems to be working fine.  Thanks in advance .
<head>
   <script src="https://urin.github.io/jquery.balloon.js/js/jquery-1.10.1.min.js"></script>
    <script src="https://urin.github.io/jquery.balloon.js/js/jquery.tile.js"></script>
    <script src="https://urin.github.io/jquery.balloon.js/js/jquery.balloon.js"></script>
<script>
$(function() {
  $('#tdr').showBalloon({ ... }).toggle(
    function(){ $(this).hideBalloon(); },
    function(){ $(this).showBalloon(); }
  );
  });
</script>
</head>

<body>
  <script>
      
  $(function() {
        var shown = true;                        
        $("#tdr > img").on("mouseover", function() {            
          shown ? $(this).hideBalloon() : $(this).showBalloon();
          shown = !shown;      
        })
            .showBalloon({
          position: "right",
          offsetX: 50,
          offsetY: 50,
          tipSize: 20,
          css: {
            maxWidth: "40em",
            fontSize: "90%",
            backgroundColor: "#efefef"
          }
        });            
      });
  </script>
 <div id="tdr">
      <img src="img/questionmark.png" id="tdr" class="sample8-2"  title="Based on rolling 30 day TDR %<br />A - Performing above TDR Goal<br/> B - Performing at TDR Goal<br/>C -Performing below TDR Goal" /></div>
</body>
UpperdeckerAsked:
Who is Participating?
 
skijCommented:
Try this:
<!doctype html>
<html lang="en">
<head>
   <script type="text/javascript" src="https://urin.github.io/jquery.balloon.js/js/jquery-1.10.1.min.js"></script>
   <script type="text/javascript" src="https://urin.github.io/jquery.balloon.js/js/jquery.tile.js"></script>
   <script type="text/javascript" src="https://urin.github.io/jquery.balloon.js/js/jquery.balloon.js"></script>
</head>
<body>
  <script type="text/javascript" >
  $(function() {
        $("#tdr > img").hover(
          function() {
           $(this).showBalloon({
             position: "right",
             offsetX: 50,
             offsetY: 50,
             tipSize: 20,
             css: {
               maxWidth: "40em",
               fontSize: "90%",
               backgroundColor: "#efefef"
             }
           });    
          }, function() {
            $(this).hideBalloon(); 
          }
        );
      });
  </script>
 <div id="tdr">
      <img src="img/questionmark.png" id="tdr" class="sample8-2"  alt="Based on rolling 30 day Goal" title="Based on rolling 30 day Goal" />
 </div>
</body>
</html>

Open in new window

0
 
UpperdeckerAuthor Commented:
Works great! thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.