jquery - 图片库上的工具提示(例如设置)无法正常工作

标签 jquery tooltip

我正在尝试创建工具提示作为类似图像库的设置中的图像布局...在浏览器中，工具提示正在工作，至少在某种程度上是有效的，但是 在第二个和第三个图像上，它们往往离右侧太远，我也希望工具提示位于光标顶部，但找不到方法，因为事件。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/

最佳答案

删除工具提示上的 .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>

关于jquery - 图片库上的工具提示(例如设置)无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46971051/

上一篇：javascript - 单击时更改内部 html，然后使用 Jquery 或 JS 更改回单击

下一篇：Javascript回调函数——疑惑与误解

相关文章：

javascript - 使用javascript更改任意文本的背景颜色

javascript - 将数据从 JQuery on click 函数传递到 PHP 服务器？

javascript - 如何选择 kendoDropDownList 的长度

javascript - 如何使用 js-cookie 创建两个 cookie？

javascript - 如何为 L.Tooltip 显示设置延迟？

jquery - Cakephp 中的类似对话框的工具提示 - 类似于 stackoverflow 框

jQuery:使用固定标题平滑滚动

.net - 更改工具提示字体

css - 在溢出时显示工具提示 :hidden

Java SWT : show paintings in tooltip

©2024 IT工具网  联系我们