Search code examples
jquerytooltip

tooltip on image-gallery like setup not working correctly

i am trying to create tooltips as layout for over images in a image-gallery-like setup... in browser the tooltips are working, well at least somewhat, however on the second and third image they tend to be too far towards the right, also i'd like the tooltips to be on top of the cursor, but couldn't find a way as event.PageX had the best result so far, and i can't get that function to work how i want...

my bet is that it's due to the image-gallery-like design, however even with this knowledge i fail to fix the tooltips...

it may be best to copy the code because my jsfiddle doesn't work completely

this is my code so far:

<!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>

as you might be able to see there is a slight error on the second and third image of each row.

i'll include a jsfiddle here: http://jsfiddle.net/f2yseub0/2/

Solution

  • Remove the .css('margin-left', offset.left) on your tooltip. I have add 10px left and top for the cursor not pass inside the tooltip. Please try:

    $(document).ready(function(){
    $(document).mousemove(function(event){ 
    		eLeft =  event.pageX;
        $("span").text("X: " + event.pageX + ", Y: " + event.pageY); 
    });
});
$(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')
        .html(txt);

        $(this).after($tooltip);


    });

    $('.small').mousemove(function (e) {
        $(".tooltip").css('left',e.pageX + 10);
        $(".tooltip").css('top',e.pageY +10); 
    });

    $('.small').mouseleave(function () {

        $('.tooltip').remove();
        $(this).attr('title', txt);

    });

});
    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;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>