tooltipの表示・非表示

<#tooltip要素が#loremIpsumBody上にある時のみ表示されるようする方法を教えてください。>
* ただし、下記の要件を満たすこと。
* 表示の際のopacityの最大値は0.9
* 表示、非表示の際はanimate()を使用し、200ミリ秒をかけてopacityを変化させること。
* 表示、非表示を連続させた際も滑らかにanimateすること。

どうしても#loremIpsumBody上以外でtooltipが表示されてしまいます。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8  <title>jQuery Part3</title>
9  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
10  <link rel="stylesheet" href="style.css">
11</head>
12
13<body>
14  <div class="container">
15    <h1>jQuery Part3</h1>
16    <div id="loremIpsumBody" class="card">
17      <div class="card-body">
18        <p>
19          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt, urna quis porttitor venenatis, massa tortor pulvinar lacus, et porttitor odio metus in eros. Aenean finibus dui non erat aliquam cursus. Praesent vulputate lacus vitae augue lobortis
20          dapibus. Aenean mauris felis, ultricies in moωlestie ut, tincidunt ut augue. Quisque consequat, nisl eget tempus venenatis, nunc tortor rhoncus urna, ut vestibulum metus ipsum ut est. Vestibulum vel fringilla ipsum, at lacinia arcu. Suspendisse
21          sed ex elementum, lacinia velit sit amet, vehicula leo. Proin ultrices mollis nibh, eget cursus felis commodo at.
22        </p>
23      </div>
24    </div>
25    <div id="tooltip" class="tooltip">
26      <p class="badge badge-info">tooltip</p>
27    </div>
28  </div>
29  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
30  <script src="script.js"></script>
31</body>
32
33</html>

jQuery
1$(() => {
2  $('body').mousemove(function(e){
3    $('#tooltip').css({
4      'top': e.clientY - 10,
5      'left': e.clientX + 10
6    });
7  });
8
9    $('#loremIpsumBody').mousemove(function(a){
10        $('#tooltip').animate({
11          'opacity':'0.9',
12          'font-size': '40px'
13        },200,function(){
14          $('body').stop();
15        };
16    });
17})

okina

2020/05/07 06:48

#tooltip要素が#loremIpsumBody上にある時のみというのは、マウスが#loremIpsumBody上にある時に、tooltipを表示させるという認識でよろしいですか？

hase_

2020/05/07 08:21

コメントありがとうございます！その認識で合っております！

kei344

2020/05/13 04:12

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答2件

自己解決

on（）メソッドを活用して、
mouseoverの時の#tooltipはopacity0.9
mouseleaveの時の#tooltipはopacity0
で解決できました！

投稿2020/05/13 03:21

hase_

総合スコア14

自分なりに簡単に書いてみました。
tooltipの上にマウスが乗るとフェードアウトしてしまうのが残念ですが...。
それと滑らかさがないかもしれません。
参考になればと思います。

jQuery
1$(() => {
2    $('#loremIpsumBody').mousemove(function(a){
3        $('#tooltip').stop();
4        $('#tooltip').css({
5            'top': a.clientY - 10,
6            'left': a.clientX + 10
7        });
8        $('#tooltip').animate({
9            'opacity':'0.9',
10            'font-size': '40px'
11        },200,function(){
12        });
13    });
14    $('#loremIpsumBody').mouseout(function(a){
15        $('#tooltip').stop();
16        $('#tooltip').animate({
17            'opacity':'0',
18            'font-size': '40px'
19        },200,function(){
20        });
21    });
22});