javascript - style - tooltip input bootstrap
En el elemento mostrar Hover de página diferente (1)
¿Cuál sería la forma más eficiente de mostrar un elemento único desde otra página al pasar el ratón sobre la página actual?
Para aclarar: digamos que tengo un elemento A en una página A. El elemento B está en la página B. Están en el mismo dominio, pero en páginas diferentes.
Si sobre el Elemento A aparece, digamos, 3 segundos, aparece una pequeña casilla y la información del Elemento B se encuentra en dicha casilla.
Ya tengo el código para un estado de desplazamiento para mostrar un cuadro blanco al lado del elemento A posicionado, pero tengo problemas para descubrir cómo voy a mostrar ÚNICAMENTE el elemento B en esta casilla.
Un iframe con un solo elemento sería exactamente lo que quiero en términos de ejecución, pero no estoy seguro de que sea posible hacer tal cosa.
Puede usar localStorage , evento de storage , Promise , setTimeout
A.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="A" style="border:1px solid green;">A</h1>
<script>
localStorage.clear();
var _resolve, _reject;
var a = document.getElementById("A");
window.open("B.html");
function wait() {
return new Promise(function(resolve, reject) {
_resolve = resolve; _reject = reject;
setTimeout(function() {
resolve()
}, 3000)
})
}
a.onmouseover = function(e) {
wait()
.then(function() {
localStorage.setItem("timeout", "complete");
})
.catch(function(err) {
alert(err)
})
a.onmouseover = null;
}
a.onmouseleave = function(e) {
if (localStorage.getItem("timeout") === null) {
_reject("less than three seconds of hovering at #A element")
} else {
localStorage.clear();
document.body.removeChild(document.querySelector("dialog"));
a.onmouseleave = null;
}
}
window.onstorage = function(e) {
console.log(e);
var dialog = document.createElement("dialog");
dialog.open = true;
dialog.innerHTML = e.newValue;
document.body.appendChild(dialog);
window.onstorage = null;
}
</script>
</body>
</html>
B.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="B">B</h1>
<script>
var b = document.getElementById("B");
window.onstorage = function(event) {
console.log(event);
localStorage.setItem("message", b.innerHTML)
}
</script>
</body>
</html>