Помощь с подсказками JQuery - PullRequest
Новая
       5

Помощь с подсказками JQuery

1 голос
/ 21 июля 2010

Я новичок в JQuery, у меня есть динамическое боковое меню (ссылки имеют класс «каналы»), и когда мышь перемещается по любой из ссылок в боковом меню, я хочу, чтобы div имел изображение и некоторые рядом с каждой ссылкой появляется текст, я пробовал использовать множество плагинов, но до сих пор ничего не получалось.

Вот HTML-код для бокового меню, я хочу, чтобы каждый div с классом «всплывающей подсказки» появлялся, как только мышь над 

<a class="channels" href="#"><img src="image path" alt=""  /></a>
<div class="tooltip">this is a tootltip div to the first channel</div>

     <div class="sep"><!-- --></div>

<a class="channels" href="#"><img src="image path" alt=""  /></a>
<div class="tooltip">this is a tootltip div to the second channel</div>

     <div class="sep"><!-- --></div>

<a class="channels" href="#"><img src="image path" alt=""  /></a>
<div class="tooltip">this is a tootltip div to the third channel</div>

Буду очень признателен, если кто-нибудь поможет мне решить эту проблему.

Спасибо

1 Ответ

1 голос
/ 21 июля 2010

Если всплывающие подсказки содержат только текст, вы можете использовать всплывающие подсказки, встроенные в HTML ... 

<a class="channels" href="#" title="this is a tootltip div to the first channel"><img src="image path" alt=""  /></a> 

 <div class="sep"><!-- --></div> 

<a class="channels" href="#" title="this is a tootltip div to the second channel"<img src="image path" alt=""  /></a> 

 <div class="sep"><!-- --></div> 

<a class="channels" href="#" title="this is a tootltip div to the third channel"><img src="image path" alt=""  /></a>

Если вам нужно каким-то образом оформить подсказки, дайте мне знать, и я постараюсь найти решение для этого подхода.

UPDATE:

Поскольку всплывающая подсказка должна содержать больше, чем простой текст, вам нужен такой подход ... 

<div class="tool_container"> 
    <a class="channels" href="#"><img src="path" alt="" /></a> 
    <span class="tooltip">tooltip<img src="path" alt="tooltipImage#1" /></span> 
</div>
<div class="tool_container"> 
    <a class="channels" href="#"><img src="path" alt="" /></a> 
    <span class="tooltip">another tooltip<img src="path" alt="tooltipImage#2" /></span> 
</div>

.tool_container
{
    position: relative;
}

.tooltip
{
    position absolute;
    top: -10px;
    border: 1px solid #808080;
    background-color: Yellow;
    display: none;
}

$(document).ready(function() {
    $(".tool_container").hover(
        function(){
            $(this).find(".tooltip").show();
        },
        function(){
            $(this).find(".tooltip").hide();
        }
    );
}

Обратите внимание на использование подсказок, чтобы они не занимали всю ширину страницы.

Фактическую разметку и CSS нужно будет настроить в соответствии с вашими целями, но я уверен, что вы поняли идею.

...