Question

我想在点击文本框时显示工具提示。我做的是：

CSS：

.tooltip {
    background-color:#000;
    border:1px solid #fff;
    padding:10px 15px;
    width:200px;
    display:none;
    color:#fff;
    float:right;
    text-align:left;
    font-size:12px;
    position:absolute;
    z-index: 1;
}
.input1 {
    background: none repeat scroll 0 0 #F8F8F8;
    border: 1px solid #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 2px #DFDFDF inset;
    clear: left;
    min-height: 45px;
    position: relative;
}
.textfield {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    font-family: inherit;
    font-size: inherit;
    font-size-adjust: inherit;
    font-stretch: inherit;
    font-style: inherit;
    font-variant: inherit;
    font-weight: inherit;
    height: 100%;
    line-height: 1em;
    margin: 0;
    padding: 15px;
    width: 100%;
}
.label {
    float: left;
    line-height: 15px;
    margin: 0;
    padding: 15px 0;
    text-align: right;
    width: 26%;
}

JS：

$(function () {
    $("#help_form :input").tooltip({
        position: "center right",
        offset: [-2, 10],
        effect: "fade",
        opacity: 0.7
    });
});

HTML：

<div id="help">
    <form id="help_form" class="help_form" action="/me/problem" method="post">
        <div class="input1">
            <label class="label" for="issuetitle">Title</label>
            <input class="textfield" type="text" name="issuetitle" title="must be 100 characters long" />
        </div>
    </form>
</div>

实际上通过设置textfield的宽度= 30％。我们可以看到工具提示。但由于一些限制，我不想要这样做。有没有其他方法可以通过使用它来实现它工具提示来自文本框。

提前致谢。

Answer 1

首先你需要一个正确的html：把<style>放在脑后。然后，您需要加载要使用.tooltip()调用的工具提示插件。然后检查你的控制台和javascript错误。

但也许你已经删除了你的代码以发布在这里。

如果是这种情况，请尝试在display: block声明中使用.tooltip，然后检查是否可以看到它。

Answer 2

你也可以使用jquery for tooltip，像这样，

  $(function() {
    $( document ).tooltip();
  });
  </script>

如果您想了解更多信息，请参阅此链接，

http://jqueryui.com/tooltip/

我应该应用哪个CSS来在文本框中显示工具提示？

2 个答案: