Question

我要为页面中的输入文本添加工具提示，这个页面有自己的CSS！我的代码是在本地机器上工作，但是当我在该页面上粘贴代码时它不起作用，似乎页面上存在冲突，但我已经没有找到问题。

js是：

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
  // execute your scripts when the DOM is ready. this is a good habit
  $(function() {

        // select all desired input fields and attach tooltips to them
      $("#myform :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",

      });
    });
</script>

css是：

  #myform {
  }
  .tooltip{

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border: 1px solid;
  position: absolute;
  border-color: #bbb #bbb #a8a8a8;
  padding: 16px;
  width: 255px;
  line-height: 17px;
  opacity: 0;
  left: 16px;
  top: 48px;
  -webkit-transition: all 0.218s;
  -moz-transition: all 0.218s;
  -o-transition: all 0.218s;
  transition: all 0.218s;
  }

，代码是：

<form id="myform" action="#">
    <!-- username -->
    <label for="username">Username</label>
    <input id="username" title="Must be at least 8 characters."/>
</form>

及以下是页面的当前输入css：

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    color: #000;
    font-size: 1.4rem;
    font-size: 14px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
    padding: 8px 10px 8px 46px;
    width: 83%;
}

Answer 1

您可以通过添加自己的.tooltip样式覆盖样式，并使用！important覆盖每个样式。为.tooltip中的每个样式执行此操作。希望这个帮助。这是一个简单的JSFiddle example。

.tooltip{
     background-color:red !important;
}

输入文本工具提示未显示

1 个答案: