How to use jQuery Tooltip?

Question

I am using jQuery Tooltip and everything is working fine with one little problem: I am not seeing the arrow shape of the tooltip. Instead I am getting a square shape. I want to get the arrow shape pointing towards the TextBox. I got the following code from here and everything looks okay when you look at this.

How can I get the arrow pointing shape? Here is my code:

  <script type="text/javascript">
          $(function () {
              $(document).tooltip({
                  position: {
                      my: "center bottom-20",
                      at: "center top",
                      using: function (position, feedback) {
                          $(this).css(position);
                          $("<div>")
            .addClass("arrow")
            .addClass(feedback.vertical)
            .addClass(feedback.horizontal)
            .appendTo(this);
                      }
                  }
              });
          });
  </script>
  <style type="text/css">
  .ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }
  </style>

One thing to note is that I am using ASP.NET and I am getting red lines under these:

box-shadow:
tranform:
border-radius:

The error reads like this "[property] is not a known CSS property name" for each of the above properties.

Answer 1

I spent a few hours hacking the CSS to get this to work under IE 8. The solution uses the triangle icon provided by jQuery UI Themes. Please see this post for the answer: How do you make the arrows appear on the jQuery UI 1.10.2 Tooltips widget in IE 8?

Answer 2

The arrow's working for me, and i basically just copied and pasted your code with the UI's example code as the body. Here's a dumb question: you are loading jqueryUI css BEFORE your custom css, right? You also may want to move your custom js to the end of the body, just before the ending </body> tag, just make sure it's AFTER JQuery and JQuery UI. Here's a link to the fiddle.

<script>
      $(function () {
          $(document).tooltip({
              position: {
                  my: "center bottom-20",
                  at: "center top",
                  using: function (position, feedback) {
                      $(this).css(position);
                      $("<div>")
        .addClass("arrow")
        .addClass(feedback.vertical)
        .addClass(feedback.horizontal)
        .appendTo(this);
                  }
              }
          });
      });
</script>
</body>

Edit: Just for giggles, I did a jsfiddle to illustrate my so very poorly articulated suggestion. lol. it uses the image. it's not perfect, but you get the idea. The image Tool pointer!!

Hope all has been helpful.