ich versuche, Tooltips als Layout für Überbilder in einem Bildergalerie-ähnlichen Setup zu erstellen ... im Browser funktionieren die Tooltips, naja zumindest etwas, jedoch an das zweite und das dritte Bild neigen dazu, zu weit nach rechts zu sein, außerdem möchte ich, dass die Tooltips oben auf dem Cursor sind, aber keinen Weg als Ereignis finden konnten. SeiteX hatte bisher das beste Ergebnis, und ich kann diese Funktion nicht zur Arbeit kommen, wie ich ... willTooltip auf Bildgalerie wie Setup funktioniert nicht richtig
meine Wette ist, dass es auf die Bildgalerie artigen Design, aber auch mit diesem Wissen die Tooltips zu beheben i scheitern ist ...
kann es am besten sein, den Code zu kopieren, weil mein jsfiddle tut nicht vollständig arbeiten
dies mein Code so weit:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(document).mousemove(function(event){
$("span").text("X: " + event.pageX + ", Y: " + event.pageY);
});
});
</script>
<style>
body{
background-color:#222;
}
.main {
margin: 10px;
text-align: justify;
/* IE needs this */
text-justify: distribute-all-lines;
height:auto;
top:12px;
position;absolute;
}
/* justify last visible row: note this also gives extra empty space after
the .main element unless you set font-size: 0; on .main */
.main:after {
content: '';
display: inline-block;
width: 100%;
}
/* inline-block doesn't do much here, vertical-align is good to have */
.main > * {
display: inline-block;
vertical-align: top;
}
img.header {
width: 100%;
}
img.small {
margin-top: 25px;
/* fallback: use fluid gutter */
width: 32%;
/* fixed gutter of 25px */
width: -webkit-calc((100% - 20px)/3);
width: calc((100% - 20px)/3);
opacity:1;
}
.main:hover img.small{
opacity:0.4;
}
.main:hover img.small:hover{
opacity:1;
}
img.small:hover{
cursor:pointer;
}
img.small{
position:relative;
}
img.small .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#000;
color:#fff;
opacity:0.4;
text-align:center;
font-size:4em;
line-height:300px;
}
.tooltip{
padding:8px;
border:3px solid #930;
border-radius: 12px;
background-color: #cb6;
color: #930;
position: absolute;
z-index: 2;
text-align: center;
}
</style>
<script>
$(document).ready(function() {
var txt = "";
$('.small').mouseenter(function (e) {
txt = $(this).attr('title');
$(this).attr('title', '');
var offset = $(this).offset();
var $tooltip = $('<div></div>')
.attr('class', 'tooltip')
.css('margin-left', offset.left)
.html(txt);
$(this).after($tooltip);
});
$('.small').mousemove(function (e) {
$(".tooltip").css('left',e.pageX);
$(".tooltip").css('top',e.pageY);
});
$('.small').mouseleave(function() {
$('.tooltip').remove();
$(this).attr('title', txt);
});
});
</script>
</head>
<body>
<p style="color:#ffffff;">The mouse pointer position is at: <span></span>
</p>
<div class="main">
<img title="youtube"
onclick="window.open('http://www.youtube.com','_blank');"class="small"
src="http://x3mis.eu/View/261017125119" width="100%" height="50%">
<img title="lunagang"
onclick="window.open('http://www.lunagang.nl','_blank');" class="small"
src="http://x3mis.eu/View/261017125159" width="100%" height="50%">
<img title="facebook"
onclick="window.open('http://www.facebook.com','_blank');" class="small"
src="http://x3mis.eu/View/261017125627" width="100%" height="50%">
<img title="roundcube"
onclick="window.open('http://vserver200.axc.eu/roundcube','_blank');"
class="small" src="http://x3mis.eu/View/261017130212" width="100%"
height="50%">
<img title="outlook" onclick="window.open('http://outlook.com','_blank');"
class="small" src="http://x3mis.eu/View/261017130747" width="100%"
height="50%">
<img title="x3mis" onclick="window.open('http://x3mis.eu','_blank');"
class="small" src="http://x3mis.eu/View/261017125259" width="100%"
height="50%">
</div>
</body>
</html>
als Sie ein kleiner Fehler auf der zweiten und dritten Bild jeder Reihe zu sehen, vielleicht in der Lage ist.
Ich werde einen jsfiddle hier sind: http://jsfiddle.net/f2yseub0/2/
Dank, scheint dies eine gute Arbeit zu tun, erstaunlich –