Potrzebuję podstawowej idei tworzenia niestandardowej podpowiedzi przy użyciu czystego kodu Javascript;podstawowa idea niestandardowej podpowiedzi, używanie czystej Javascript
Czego chcę:
Na przykład:
<a href="#" onmousemover="tooltip('text')">Link Text</a>
I onmouseover chcę wyświetlić niestandardową podpowiedź z fixed position na podstawie elementu <a> „s position, aby rozpocząć od right:0 lub od left:0 elementu <a>;
Gdy to pytanie pojawia się, gdy użytkownik szuka custom tooltip, chciałbym dodać etykietkę JS bootstrap, chociaż wspomniano o czystym javascript. Więc w pewnym sensie ta odpowiedź jest tylko po to, by dać przyszłym czytelnikom kolejną dobrą opcję do pracy.
Zobacz, jak używać wtyczki bootstrap tooltip. I here, aby zapoznać się z opcjami i metodami dostępnymi do Twojej dyspozycji podczas używania Bootstrap JS Tooltip.
Nadal daję się tryit z ich strony tutaj:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color: #73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
border-right: 5px solid black;
}
</style>
</head>
<body>
<div class="container">
<h3>Tooltip CSS Example</h3>
<ul class="list-inline">
<li><a class="test" href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a class="test" href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a class="test" href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a class="test" href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
PS:: Zanim zgodzisz się na tę odpowiedź, nie będąc odpowiedzią na PO, pamiętaj, że zamierzałem, aby była to pomoc dla przyszłych czytelników, ponieważ prowadzi tutaj wyszukiwanie dla custom tooltip.
Pomimo swojej woli nadal nie odpowiada na pytanie i nie należy do niego. – Rob
@Rob Z jednej strony masz rację, tu nie pasuje. Ale z drugiej strony, biorąc pod uwagę P.S. w odpowiedzi, myślę, że to * rodzaj * należy tutaj. Zauważ ponownie * rodzaj *. :-) –
Musisz funkcyjny coś takiego:
function tooltip(text, element) {
var offsetDistance = 20;
tt = document.getElementById('ttdiv');
elem = document.getElementById(element.id);
tt.style.top = elem.offsetTop + offsetDistance + 'px';
tt.style.left = elem.offsetLeft + offsetDistance + 'px';
tt.style.display = 'block';
tt.innerHTML = text;
}
Gdzie ttdiv jest id div podpowiedzi, który jest początkowo ustawiony na display:none. Będziesz potrzebować dołączonej funkcji hide(), aby ukryć etykietkę narzędzia po wywołaniu onmouseout.
Oto działa JSFiddle.
Mam świetny pomysł na to pytanie.
HTML
<a href="https://www.google.com" tooltip="Go to Google">Google</a>
JavaScript
(function() {
var a = document.getElementsByTagName('*'),
tip, text,
base = document.createElement('tooltip'); //Defining all objects
for (var x=0;x < a.length;x++) { //I'm using "for" loop to get all "a" elements with attribute "tooltip".
a[x].onmouseover = function() {
text = this.getAttribute('tooltip');
tip = document.createTextNode(text);
if (text != null) {// Checking if tooltip is empty or not.
base.innerHTML = '';
base.appendChild(tip);
if (document.getElementsByTagName('tooltip')[0]){// Checking for any "tooltip" element
document.getElementsByTagName('tooltip')[0].remove();// Removing old tooltip
}
base.style.top = (event.pageY + 20) + 'px';
base.style.left = (event.pageX + 20) + 'px';
document.body.appendChild(base);
}
};
a[x].onmouseout = function() {
document.getElementsByTagName('tooltip')[0].remove();// Remove last tooltip
};
}
})();
Włączając ten skrypt na swojej stronie, po prostu trzeba użyć tooltip="Text" w dowolnym HTML Element
CSS
tooltip {
position: fixed;
background: #fff;
color: #333;
border: 2px solid #333;
font-size: 15px;
}
Możesz edytować CSS jako swoje życzenie!
Oto mój JSFiddle
nadzieję, że to pomoże.
Dlaczego tak wielu "co próbowaliście" w dzisiejszych czasach, gdzie ci ludzie mieliby szukać pomocy, którzy są początkującymi? Nienawidzę tych słów! – Sarfraz
@DavidThomas jedyny problem jaki miałem, był z pozycją stworzonej podpowiedzi, myślałem, że zrobiłem to dobrze, ale pozycja nie była taka, jak się spodziewałem, – John
@Sarfraz: Nie mam nic przeciwko pomocy komuś, kto nic nie próbował, ale , jeśli coś zostało zrobione, wolałbym zacząć od tej uprzedniej wiedzy. Chociaż zgadzam się z tym, że pytanie początkowe może wydawać się nieco zbyt agresywne, ważniejsze są kolejne pytania, chociaż budują fundamenty pierwszego. –