JavaScript - tooltip div on hover

Question

Я хотел бы реализовать эту ситуацию: ссылка пользователя hovers и на его экране появляется div с дополнительной информацией.

Нет проблем, чтобы генерировать div с абсолютным положением, заполнять данные и отображать их с помощью jQuery, но проблема связана с ремонтопригодностью. Я хочу отделить логику и взгляд. Что делать, если я хочу изменить макет страницы в будущем? Как программист узнает, что какая-то часть страницы существует в файле JavaScript?

Это элегантный способ разделить вид (в моем случае структуру HTML) и логику (данные, полученные с сервера в JSON с использованием JS-скрипта) и объединить их? Это какой-то ... шаблонный движок или что-то в этом роде в JavaScript?

Answer 1

Bootstrap делает все это и многое другое: http://getbootstrap.com/javascript/#tooltips

Выражаясь:

$('#example').tooltip(options) 

И разметке существо:

<div class="tooltip"> 
    <div class="tooltip-inner"> 
    Tooltip text here! 
    </div> 
    <div class="tooltip-arrow"></div> 
</div> 

Перейдите по ссылке для более детального объяснения как его реализовать

Answer 2

Вы можете изменить Title = "information" dyn amicaly некоторой программы или сценария и использовать следующий код, чтобы отобразить его в качестве наконечника инструмента, нашел его на чистую

http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

Answer 3

Вы можете создавать свои записи HTML, как этот

<a> 
    My Cool Link 
    <div class="tooltip"> 
     This link is awesome! 
    </div> 
</a> 

и использовать CSS стилизовать подсказка: (важная часть является a:hover .tooltip и все, кроме background на .tooltip

a { 
    display: inline-block; 
} 
a:hover .tooltip { 
    visibility: visible; 
} 
.tooltip { 
    position: relative; 
    top: 20px; 
    left: -50%; 
    display: inline; 
    visibility: hidden; 
    background: #eee; 
} 

Пример: http://jsfiddle.net/4K7sB/

Тогда вам просто нужно заполнить элементы правильным текстом с помощью JS.

Answer 4

Просто добавьте атрибут заголовка в сНу тэгом как ниже код ....

<div title="First Div">StackOverFlow StackOverFlow StackOverFlow 
StackOverFlow StackOverFlow StackOverFlow StackOverFlow StackOverFlow 
StackOverFlow </div> 
</div> 
<br /><br /> 
<div title="Second Div">StackOverFlow StackOverFlow StackOverFlow 
StackOverFlow StackOverFlow StackOverFlow StackOverFlow StackOverFlow 
StackOverFlow </div> 
</div> 

просто скопировать пасты и проверить.