jquery - フォーム要素スタイルのjqueryツールチップが表示されない

Question

thisに基づいてツールチップを実装しました。ツールチップは表示されますが、スタイルがありません。スタイルシートにあるものがうまく動かないようです。

私のコード:

JS

       // select all desired input fields and attach tooltips to them
      $("#edit_foto_form :input").tooltip({
      // place tooltip on the right edge
      position: "center right",
      // a little tweaking of the position
      offset: [-2, 10],
      // use the built-in fadeIn/fadeOut effect
      effect: "fade",
      // custom opacity setting
      opacity: 0.7
      });

CSS

/* simple css-based tooltip */ .tooltip {
    background-color:#000;
    border:1px solid #fff;
    padding:10px 15px;
    width:200px;
    display:none;
    color:#fff;
    text-align:left;
    font-size:12px;

    /* outline radius for mozilla/firefox only */
    -moz-box-shadow:0 0 10px #000;
    -webkit-box-shadow:0 0 10px #000;
}

HTML

<div id="content">
    <h1 class="top">Update Foto</h1>
    <form action="" method="post" id="edit_foto_form" enctype="multipart/form-data">
        <input type="hidden" name="action" value="update_foto" />
        <label for="file">Foto:</label>
        <input type="file" name="fotofile" id="fotofile" title="Bitte Foto 100 x 100, größere werden angepasst."><br>
        <span></span>        
        <br />
        <label>&nbsp;</label>
        <input type="submit" value="Hochladen" />
        <br />
    </form>
</div

何が間違っている可能性がありますか？

doco の Head セクションに追加された Jquery:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<script src=http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/localization/messages_de.js"></script>

Answer 1

jqueryTools を含める必要があります。jquery、jquery UI、および jquery validate のみを含めました。これを HTML に追加します

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

Answer 2

内部に JS コードを配置します: (document.ready)

$(関数() {

//JS コード

});