Question

我正在尝试设置Qtip2，而我却陷入了写javascript的困境。出于某种原因，我的.hover代码什么都不做（尝试将它转到console.log，以查看是否存在问题并且控制台为空）。你能看一下我的代码并告诉我，我做错了吗？

谢谢，下面的代码段

＆＃13;

$(document).ready(function() {
  $('.mouseover').hover(function() {
    console.log("mouseover");
    $('mouseover').each(function() {
      $(this).qtip({
        content: {
          text: $(this).next('div')
        }
      });
    });
  });
});

＆＃13;

.mouseover {
  border: 1px solid black;
  height: 300px;
  width: 300px;
}
.tooltip {
  display: none;
}

＆＃13;

<html>

<head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link type="text/css" rel="stylesheet" href="index.css" />
</head>

<body>
  <div class='mouseover'>Tooltip testin'</div>
  <div class='tooltip'> <b>TOOLTIP</b> 
    <p>testin</p>
  </div>

  <script type="text/javascript" src="jquery-213.js"></script>
  <script type="text/javascript" src="jquery.qtip.js"></script>
  <script type='text/javascript' src='tolltip.js'></script>
</body>

</html>

＆＃13;

Answer 1

$(document).ready(function() {
    $('.mouseover').hover(function() {
        console.log("mouseover");
        $('.mouseover').each(function() {
            $(this).qtip({
                content: { text: $(this).next('div') }
            });
        });
    });
});

你错过了这个点。希望这有效。

Answer 2

不使用javascript尝试这样做：

.tooltip {
  display: none;
}
.mouseover:hover .tooltip{
    display:block;
}

看看这个小提琴：http://jsfiddle.net/mncknja0/

Answer 3

我不确定，但为什么你需要悬停显示工具提示？根据{{3}}它是必要的。

请参阅此示例：documentation

  $('.mouseover').each(function() {
      $(this).qtip({
        content: {
          text: $(this).next('div')
        }
      });
    });

我的div上的.hover什么也没做

3 个答案: