我找到了一个解决方案,允许我点击某个区域以使用JavaScript显示工具提示,但仅适用于第一个项目。 Here is that solution.
以下是代码:
<script>
function doTip(e) {
var elem = e.toElement;
if (elem.getAttribute('data-tip-on') === 'false') {
elem.setAttribute('data-tip-on', 'true');
var rect = elem.getBoundingClientRect();
var tipId = Math.random().toString(36).substring(7);
elem.setAttribute('data-tip-id', tipId);
var tip = document.createElement("div");
tip.setAttribute('id', tipId);
tip.innerHTML = elem.getAttribute('data-tip');
tip.style.top = event.clientY + 15 + 'px';
tip.style.left = event.clientX + 10 + 'px';
tip.setAttribute('class', 'tip-box');
document.body.appendChild(tip);
} else {
elem.setAttribute('data-tip-on', 'false');
var tip = document.getElementById(elem.getAttribute('data-tip-id'));
tip.parentNode.removeChild(tip);
}
}
function enableTips() {
var elems = document.getElementsByClassName('quick-tip');
for (var i = 0; i < elems.length; i++) {
elems[0].addEventListener("click", doTip, false);
}
}
window.onload = function() {
enableTips();
}
</script>
<style>
.quick-tip {
background: black;
color: #fff;
padding: 5px;
cursor: pointer;
height: 15px;
width: 15px;
text-align: center;
font-weight: 900;
margin-left: 350px;
}
.tip-box {
/* change dimensions to be whatever the background image is */
height: 50px;
width: 200px;
position: absolute;
}
</style>
<map>
<area class="quick-tip" shape="poly" data-tip="THIS IS THE TIP! change elements 'data-tip' to change." data-tip-on="false"/>
<area class="quick-tip" shape="poly" data-tip="THIS IS THE TIP! change elements 'data-tip' to change." data-tip-on="false"/>
</map>
<script>
enableTips();
</script>
只有顶部有效,底部无效。我需要的功能是两个按钮在点击时显示工具提示。我试过缝合不同解决方案的其他部分无济于事。我也尝试了其他解决方案,似乎没有一个在我的页面上工作。
我修改了原始解决方案并使用了<area>
,因为当鼠标悬停在<area>
上时,该页面最初会弹出工具提示。需要将悬停功能更改为在解决方案中单击,但第一个是唯一有效的。
答案 0 :(得分:2)
你有一个错字
var reviews = document.querySelector("put your selector here"),
access_id = "6372114628.890c38a.4e03aa92b121459c84e893c54c3c0ce1",
post_count = 10;
var query = jQuery.ajax({
url: `https://api.instagram.com/v1/users/self/media/recent?access_token=${access_id}&count=${post_count}&callback=?`,
error: function () {
console.error();
},
success: function (result) {
result.data.map(function (item) {
reviews.innerHTML += `<a class="images" href="${item.link}" target="_blank"><img src="${item.images.low_resolution.url}" /></a>`;
});
},
type: "GET",
dataType: "jsonp"
});
应该是
elems[0].addEventListener("click", doTip, false);