html - 如何在html中添加工具提示？

Question

我有以下代码，但它不起作用，谁能帮帮我

<form id="myform" action="#">

  <h3>Registration Form</h3>

  <div id="inputs">

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

    <!-- password -->
    <label for="password">Password</label>
    <input id="password" type="password" title="Make it hard to guess." />
    <br />

    <!-- email -->
    <label for="email">Email</label>
    <input id="email" title="We won't send you any marketing material." />
    <br />

    <!-- message -->
    <label for="body">Message</label>
    <textarea id="body" title="What's on your mind?"></textarea>
    <br />

    <!-- message -->
    <label for="where">Select one</label>
    <select id="where" title="Select one of these options">
      <option>-- first option --</option>
      <option>-- second option --</option>
      <option>-- third option --</option>
    </select>
    <br />
  </div>

  <!-- email -->
  <label>
    I accept the terms and conditions
    <input type="checkbox" id="check" title="Required to proceed" />
  </label>

  <p>
    <button type="button" title="This button won't do anything">
      Proceed
    </button>
  </p>

</form>

Answer 1

title属性完成工作。

您的代码适用于 chrome、FF 和 IE 9 和 10

Answer 2

为什么不使用placeholder而不是title.

支持的概述

在其他浏览器中，您可以使用此 javascript：

<script>
  var doc = document;
  var inputs = doc.getElementsByTagName('input'),
  var supportPlaceholder = 'placeholder' in doc.createElement('input');

  var placeholder = function(input) {
    var text = input.getAttribute('placeholder');
    var defaultValue = input.defaultValue;

    input.value = text;
    input.onfocus = function() {
      if (input.value === defaultValue || input.value === text) {
        this.value = '';
      }
    }
    input.onblur = function() {
      if (input.value === '') {
        this.value = text;
      }
    }
  };

  if (!supportPlaceholder) {
    for (var i = 0, len = inputs.length; i < len; i++) {
      var input = inputs[i], text = input.getAttribute('placeholder');
      if (input.type === 'text' && text) {
        placeholder(input);
      }
    }
  }
</script>

Answer 3

插入title=""属性，它将为您工作。

Answer 4

尝试qTip- http://craigsworks.com/projects/qtip/并查看demo- http://jsfiddle.net/ramsunvtech/zzZBM/