Подсказка не работает при наличии более одного - PullRequest
Новая
       7

Подсказка не работает при наличии более одного

0 голосов
/ 27 июня 2018

Прежде всего, извините, потому что я уверен, что это будет глупо.

У меня есть этот код, в котором я хотел бы отображать изображения при наведении текста. Делая это во всплывающей подсказке, все выглядит нормально, но всплывающая подсказка работает только над первой. Должен ли я создавать классы для каждого?

HTML: 

<div title="regular tooltip">Description:

<a class="tooltip" href="http://www.google.com/">
    Tooltip 1
    <span id="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>

/

<a class="tooltip" href="http://www.google.com/">
    Tooltip 2
    <span id="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>


</div>

JS: 

var tooltipSpan = document.getElementById('tooltip-span');

window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
};

CSS: 

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

Ссылка на jsfiddle: http://jsfiddle.net/javierestebanx/HJf8q/3430/

Спасибо всем заранее!

Ответы [ 3 ]

0 голосов
/ 27 июня 2018

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

getElementsByClassName получает HTMLCollection, поэтому вы должны зациклить элементы внутри. 

var tooltipSpans = document.getElementsByClassName('tooltip-span');

window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY,
        i, l = tooltipSpans.length;
    for(i = 0; i < l; i++){
      tooltipSpans[i].style.top = (y + 20) + 'px';
      tooltipSpans[i].style.left = (x + 20) + 'px';
    }
};
.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}
<div title="regular tooltip">Description:

<a class="tooltip" href="http://www.google.com/">
    Tooltip 1
    <span class="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>

/

<a class="tooltip" href="http://www.google.com/">
    Tooltip 2
    <span class="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>


</div>
0 голосов
/ 27 июня 2018

Идентификаторы span должны быть уникальными. Вот рабочий код

HTML: 

<div title="regular tooltip">Description:

<a class="tooltip" href="http://www.google.com/">
    Tooltip 1
    <span id="tooltip-span1">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>

/

<a class="tooltip" href="http://www.google.com/">
    Tooltip 2
    <span id="tooltip-span2">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>


</div>

CSS 

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

JS: 

var tooltipSpan = document.getElementById('tooltip-span1');
var tooltipSpan2 = document.getElementById('tooltip-span2');
window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
    tooltipSpan2.style.top = (y + 20) + 'px';
    tooltipSpan2.style.left = (x + 20) + 'px';
};

Надеюсь, это то, что вам нужно.

0 голосов
/ 27 июня 2018 

var tooltipSpan = document.getElementById('tooltip-span');
var tooltipSpan1 =document.getElementById('tooltip-span2');
window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
 tooltipSpan1.style.top = (y + 20) + 'px';
    tooltipSpan1.style.left = (x + 20) + 'px';
};
.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span ,.tooltip span2{
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}
<div title="regular tooltip">Description:

<a class="tooltip" href="http://www.google.com/">
    Tooltip 1
    <span id="tooltip-span">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>

/

<a class="tooltip" href="http://www.google.com/">
    Tooltip 2
    <span id="tooltip-span2">
        <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
    </span>
</a>


</div>

id="tooltip-span" используется дважды в DOM. это должно быть уникальным. Вы можете создать отдельный идентификатор или использовать className и связать событие onmousemove. Предварительный просмотр с двумя идентификаторами

...