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

知道什么是错的吗？

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

将JS代码置于：（document.ready）

$（function（）{

//你的JS代码
});

Answer 2

Jquery工具提示似乎不适用于input type="file"。我使用了您的代码并更改了type="text"，它运行正常。

你可以在这里看到演示：

jsfiddle.net/3mhSn/10/

Answer 3

您需要包含jqueryTools。您只包括jquery，jquery UI和jquery验证。将其添加到您的HTML

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

Answer 4

问题出在一个函数中，我将表单验证和工具提示放在一起。创建两个单独的功能后，一切正常。再次感谢您的所有提示。

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

4 个答案: