图像库上的工具提示，如设置无法正常工作

时间：2017-10-27 08:50:28

标签： jquery tooltip

我正在尝试创建工具提示作为图像库设置中的过度图像的布局...在浏览器中工具提示正在工作，但至少在某种程度上， 在第二和第三个图像上，它们往往偏向右边，我也希望工具提示位于光标顶部，但是找不到像event.PageX到目前为止最好的结果，并且我无法按照我想要的方式工作...

我的赌注是它是由于图像库般的设计，但即使有了这些知识我也无法修复工具提示...

最好复制代码，因为我的jsfiddle不能完全正常工作

到目前为止，这是我的代码：

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

因为您可能会看到每行的第二张和第三张图像上有轻微错误。

我将在这里包含一个jsfiddle： http://jsfiddle.net/f2yseub0/2/

1 个答案:

答案 0 :(得分：0)

删除工具提示中的.css('margin-left', offset.left)。我已添加10px左侧和顶部的光标未通过工具提示内部。请尝试：

$(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>

相关问题
最新问题