Mouseover popup-Sprechblase
Ich bin neu in javascript/css und würde gerne eine version von ein mouseover-popup ähnlich dem, welches zeigt über die unterstrichenen Wörter hier: http://st.japantimes.co.jp/essay/?p=ey20141219
Ich kann sehen, dass der code, der verwendet wird, aber ich bin mir nicht sicher, wo/wie man in meine eigene Sprechblase Bild, wenn ich den code Bearbeiten, der für mein eigenes Projekt.
Hier ist ein Beispiel für den code verwendet, auf der referenzierten Seite:
HTML:
<a style="cursor:pointer;" onclick="showChuPopup(event,'<b>’Twas</b><br />It was の省略');return false;" onmouseover="showChuPopup(event,'<b>’Twas</b><br />It was の省略');" onmouseout="endChuPopup();">’Twas</a>
Javascript:
function showChuPopup(e,text){
if(document.all)e = event;
var obj = document.getElementById('chu_popup');
var obj2 = document.getElementById('chu_popup_text');
obj2.innerHTML = text;
obj.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);/*
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;*/
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';} function endChuPopup() {
document.getElementById('chu_popup').style.display = 'none';} function touchHandler(e){
document.getElementById('chu_popup').style.display = 'none';}
Vielen Dank für jede Hilfe oder Ideen.
- Mögliche Duplikate von jQuery-Popup-Blase/Tooltip
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gibt es ein paar Möglichkeiten, darüber zu gehen, aber ich werde empfehlen Ihnen zwei Optionen und links zu den beiden!
Ersten, überprüfen Sie heraus die Antwort auf diese Frage zu finden, wenn dies ist, was Sie wollen:
jQuery Popup-Blase/Tooltip
Zweiten, haben Sie darüber nachgedacht, nur mit einem tooltip mit CSS? Sie sind nicht schwer zu implementieren, und Sie können absolut binden von Daten zu Ihnen.
(Schamlos geklaut von: https://www.w3schools.com/css/css_tooltip.asp, würde ich empfehlen, stochern hier und auch auf der Suche in Bootstrap, wenn du bist ein Anfänger!!!)