首页>>Jquery文字>>简单好用的tips，支持表单错误和文字内容提示(2015-11-12)

简单好用的tips，支持表单错误和文字内容提示

简单好用的tips，支持表单错误和文字内容提示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form novalidate>  
  2. <h1>Tooltip errors on focus</h1>  
  3. <!-- Right tooltip -->  
  4. <label for="first-name">First Name</label>  
  5. <input type="text" id="first-name" data-tooltip="Please enter a first name" class="error" />  
  6. <!-- Left tooltip -->  
  7. <label for="last-name">Last Name</label>  
  8. <input type="text" id="last-name" data-tooltip="Please enter a last name" data-tooltip-direction="left" class="error" />  
  9. <!-- Bottom tooltip -->  
  10. <label for="email">Email</label>  
  11. <input type="email" id="email" data-tooltip="Please enter a valid email address" data-tooltip-direction="bottom" class="error"  />  
  12. <!-- Top tooltip -->  
  13. <label for="phone">Phone</label>  
  14. <input type="tel" id="phone" data-tooltip="Please enter a valid phone number" data-tooltip-direction="top" class="error"  />  
  15. <label for="state">State</label>  
  16. <select name="state" data-tooltip="Please enter a state" class="error">  
  17. <option value="" selected="selected">Select a State</option>  
  18. <option value="AL">Alabama</option>  
  19. <option value="AK">Alaska</option>  
  20. <option value="AZ">Arizona</option>  
  21. <option value="AR">Arkansas</option>  
  22. <option value="CA">California</option>  
  23. <option value="CO">Colorado</option>  
  24. <option value="CT">Connecticut</option>  
  25. <option value="DE">Delaware</option>  
  26. <option value="DC">District Of Columbia</option>  
  27. <option value="FL">Florida</option>  
  28. <option value="GA">Georgia</option>  
  29. <option value="HI">Hawaii</option>  
  30. <option value="ID">Idaho</option>  
  31. <option value="IL">Illinois</option>  
  32. <option value="IN">Indiana</option>  
  33. <option value="IA">Iowa</option>  
  34. <option value="KS">Kansas</option>  
  35. <option value="KY">Kentucky</option>  
  36. <option value="LA">Louisiana</option>  
  37. <option value="ME">Maine</option>  
  38. <option value="MD">Maryland</option>  
  39. <option value="MA">Massachusetts</option>  
  40. <option value="MI">Michigan</option>  
  41. <option value="MN">Minnesota</option>  
  42. <option value="MS">Mississippi</option>  
  43. <option value="MO">Missouri</option>  
  44. <option value="MT">Montana</option>  
  45. <option value="NE">Nebraska</option>  
  46. <option value="NV">Nevada</option>  
  47. <option value="NH">New Hampshire</option>  
  48. <option value="NJ">New Jersey</option>  
  49. <option value="NM">New Mexico</option>  
  50. <option value="NY">New York</option>  
  51. <option value="NC">North Carolina</option>  
  52. <option value="ND">North Dakota</option>  
  53. <option value="OH">Ohio</option>  
  54. <option value="OK">Oklahoma</option>  
  55. <option value="OR">Oregon</option>  
  56. <option value="PA">Pennsylvania</option>  
  57. <option value="RI">Rhode Island</option>  
  58. <option value="SC">South Carolina</option>  
  59. <option value="SD">South Dakota</option>  
  60. <option value="TN">Tennessee</option>  
  61. <option value="TX">Texas</option>  
  62. <option value="UT">Utah</option>  
  63. <option value="VT">Vermont</option>  
  64. <option value="VA">Virginia</option>  
  65. <option value="WA">Washington</option>  
  66. <option value="WV">West Virginia</option>  
  67. <option value="WI">Wisconsin</option>  
  68. <option value="WY">Wyoming</option>  
  69. </select>  
  70. </form>  
  71. <section>  
  72. <h1>Help tooltips on click</h1>  
  73. <p>What does this mean? <a href="#" data-tooltip="This tooltip is awesome" data-tooltip-direction="top" class="clicktips">?</a></p>  
  74. </section>  
  75. <section>  
  76. <h1>Help tooltips on hover</h1>  
  77. <p>How does this work? <a href="#" data-tooltip="This tooltip is magic" class="hover">?</a></p>  
  78. </section>  
  79. <section>  
  80. <h1>Format tooltip text</h1>  
  81. <p>Headers, bold, italics, and line breaks <a href="#" data-tooltip="^Title^ This text is *bold* and this text is ~italic~. | This is a new line." class="hover">?</a>  
  82. <p>List in a tooltip <a href="#" data-tooltip="This is a list of items {`item one `item two `item three}" class="hover">?</a>   
  83. </section>  
  84. </article>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_525.html