jquery - 未显示表单元素样式的jquery工具提示

Question

我基于此实现了工具提示。我看到了工具提示，但没有样式。样式表中的内容似乎无法正常工作。

我的代码：

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

知道有什么问题吗？

jquery 添加到 doco 的 Head 部分：

<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

Jquery 工具提示似乎不适用于input type="file". 我使用了您的代码并进行了更改type="text"，并且效果很好。

你可以在这里看到演示：

jsfiddle.net/3mhSn/10/

Answer 2

问题在于我同时放置表单验证和工具提示的一个功能。创建两个单独的功能后一切正常。再次感谢您的所有提示。

Answer 3

您需要包括 jqueryTools。您只包含了 jquery、jquery UI 和 jquery validate。将此添加到您的 HTML

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

Answer 4

将JS代码放在里面：（document.ready）

$（函数（）{

//你的JS代码

});