Как сделать окно справки с jquery

Question

На многих веб-сайтах есть поле справкой [?] с input, которое отображается при наведении/всплывает небольшая коробка помощи/информации. Я мог найти, что они сделаны с java script и jquery. Но как ?

Answer 1

Try ниже код

HTML

<div class="wrap">Welcome <span class="wrapper">[?]<span class="tooltip">I am a tooltip!</span> 

CSS

.wrap{ 
    margin-top: 100px; 
} 
.wrapper { 
    text-transform: uppercase; 
    cursor: help; 
    position: relative; 
    text-align: center; 
} 
.wrapper .tooltip { 
    background: #1496bb; 
    bottom: 100%; 
    color: #fff; 
    display: block; 
    left: -25px; 
    margin-bottom: 15px; 
    opacity: 0; 
    padding: 10px; 
    pointer-events: none; 
    position: absolute; 
    width: 200px; 
} 
.wrapper .tooltip:before { 
    bottom: -20px; 
    content: " "; 
    display: block; 
    height: 20px; 
    left: 0; 
    position: absolute; 
    width: 100%; 
} 
.wrapper:hover .tooltip { 
    opacity: 1; 
    pointer-events: auto; 
    -webkit-transform: translateY(0px); 
    -moz-transform: translateY(0px); 
     -ms-transform: translateY(0px); 
     -o-transform: translateY(0px); 
      transform: translateY(0px); 
} 

JSFIDDLE DEMO

Answer 2

Я думаю, вы, вероятно, могли бы сделать это без каких-либо js или css, просто используя тег span и атрибут title. Я создал jsFiddle, чтобы показать его: http://jsfiddle.net/nowk7cqr/1/

This <span title="Need some help?"> [?] </span> is a tooltip.