Ответ 1

Решение без JavaScript

Это использует псевдо-зависание CSS для установки отображения скрытого элемента. Дисплей не должен быть в стиле, а не на элементе, поэтому его можно перезаписать в режиме наведения.

HTML:

<div class="couponcode">First Link
    <span class="coupontooltip">Content 1</span> <!-- UPDATED -->
</div>

<div class="couponcode">Second Link
    <span class="coupontooltip"> Content 2</span> <!-- UPDATED -->
</div>

CSS

.couponcode:hover .coupontooltip { /* NEW */
    display: block;
}


.coupontooltip {
    display: none;  /* NEW */
    background: #C8C8C8;
    margin-left: 28px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width:200px;
    height:100px;
}

.couponcode {
    margin:100px;
}

Пример:

jsFiddle

Follow-Up:

Если вам нужно поддерживать действительно старые браузеры, вам нужно будет добавить класс к внешнему элементу, когда мышь войдет в div. И удалите этот класс, когда мышь уходит.

ИЗМЕНИТЬ

Ваш код не работал, потому что тп? Является набором элементов, и вы относитесь к нему как к одному. Что вам нужно сделать, так это передать ссылку на элемент

HTML:

<div class = "name" onmouseover="show(this)" onmouseout="hide(this)">  <!-- added "this" 2 times -->

** JavaScript:

//var name = document.getElementsByclassName("name");  /* not needed */
//    var tp = document.getElementsByclassName("tooltip"); /* not needed */


function show (elem) {  /* added argument */
    elem.style.display="block"; /* changed variable to argument */
}
function hide (elem) { /* added argument */
    elem.style.display="";  /* changed variable to argument */
}

Ответ 2

Исправить исходный код

Я искал что-то вроде этого, и я наткнулся на эту страницу. Это помогло мне, но мне пришлось исправить ваш код, чтобы он работал. Я думаю, что это то, что вы пробовали. Вы должны повторять свои объекты по их "ID". Вот что я сделал, и он работает:

HTML

<div class = "name" onmouseover="show(tooltip1)" onmouseout="hide(tooltip1)">
NAME
    <div class = "tooltip" id= "tooltip1">
        PROFILE DETAILS
    </div>
</div>

<div class = "name" onmouseover="show(tooltip2)" onmouseout="hide(tooltip2)">
NAME 2
    <div class = "tooltip" id= "tooltip2">
        PROFILE DETAILS 2
    </div>
</div>

<div class = "name" onmouseover="show(tooltip3)" onmouseout="hide(tooltip3)">
NAME 3
    <div class = "tooltip" id= "tooltip3">
        PROFILE DETAILS 3
    </div>
</div>

CSS

.name{
    float:left;
    margin:100px;
    border:1px solid black;
}
.tooltip{
    position:absolute;
    margin:5px;
    width:200px;
    height:50px;
    border:1px solid black;
    display:none;
}

JS

function show (elem) {  
    elem.style.display="block";
}
function hide (elem) { 
    elem.style.display=""; 
}

http://jsfiddle.net/5qbP3/28/

Ответ 3

Даже для $(document).ready, его трудно выполнить в чистом JS-см. здесь: $(document).ready эквивалент без jQuery

Итак, я использую простую версию:

window.addEventListener("load", function () {
    var couponcodes = document.getElementsByClassName("couponcode");
    for (var i = 0; i < couponcodes.length; i++) {
        couponcodes[i].addEventListener("mouseover", function () {
            var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
            coupontooltip.removeAttribute("style");
        });
        couponcodes[i].addEventListener("mouseout", function () {
            var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
            coupontooltip.style.display = "none";
        });
    }
});

http://jsfiddle.net/mynetx/5qbP3/

Ответ 4

Для неконфигурированной всплывающей подсказки вы можете просто добавить сообщение, которое вы хотите отобразить в подсказке в атрибуте title основного div. Точно так же:

<div class = "name" onmouseover="show()" onmouseout="hide()" title="PROFILE DETAILS">

Тогда нет необходимости добавлять обработчики событий onmouseover и onmouseout.

Ответ 5

Если вам интересна простая надежная опция, добавьте эти несколько строк JavaScript в конец вашей страницы:

(function(){
    var stylesheet1 = document.createElement('style');
    stylesheet1.innerHTML = 'mb-tooltip {display: none;position: fixed;}[data-mb-tooltip]:hover + mb-tooltip {display: block;}';
    document.head.appendChild(stylesheet1);
    var stylesheet2 = document.createElement('style');
    document.head.appendChild(stylesheet2);
    var tooltipList = document.querySelectorAll('[data-mb-tooltip]');
    for(var i = 0; i < tooltipList.length; i++){
        var tooltipContainer = document.createElement('mb-tooltip');
        tooltipContainer.innerHTML = tooltipList[i].getAttribute('data-mb-tooltip');
        tooltipList[i].parentNode.insertBefore(tooltipContainer, tooltipList[i].nextSibling);
    }
    window.addEventListener('mousemove', function(e){
        stylesheet2.innerHTML = 'mb-tooltip { top: ' + (e.clientY + 18) +'px; left: ' + e.clientX +'px}'
    });
})();

Затем добавьте data-mb-tooltip="your text" к элементу, который вы хотите показать всплывающую подсказку, когда вы наводите на него курсор.

Затем вы можете стилизовать всплывающую подсказку, но хотите использовать mb-tooltip в своем CSS (например, mb-tooltip {border:solid gray 1px;})

P.S. Вы также можете поместить HTML в mb-tooltip attr.

Ответ 6

<div class = "name" >
<p title="PROFILE DETAILS">name1</p>
</div>
<div class = "name" >
<p title="PROFILE DETAILS 2">name2</p>
</div>
<div class = "name" >
<p title="PROFILE DETAILS 3">name3</p>
</div>
<div class = "name" >
<p title="PROFILE DETAILS 4">Anjan</p>..
</div>