Jqueryプラグイン【pagePiling】のtooltipを常に表示させたい

pagepilingのナビゲーションについて、hoverするとtooltipが表示される仕様なのですが、
これを常に表示させたいです。

以下の部分を修正すればよいかと思ったのですが…

c.normalScrollElements
1            e.setMouseWheelScrolling(!1)
2        }), b(h).on("mouseleave", c.normalScrollElements, function () {
3            e.setMouseWheelScrolling(!0)
4        }));
5        var F = (new Date).getTime();
6        b(h).on("click touchstart", "#pp-nav a",
7            function (a) {
8                a.preventDefault();
9                a = b(this).parent().index();
10                l(b(".pp-section").eq(a))
11            });
12        b(h).on({
13            mouseenter: function () {
14                var a = b(this).data("tooltip");
15                b('<div class="pp-tooltip ' + c.navigation.position + '">' + a + "</div>").hide().appendTo(b(this)).fadeIn(200)
16            },
17            mouseleave: function () {
18                b(this).find(".pp-tooltip").fadeOut(200, function () {
19                    b(this).remove()
20                })
21            }
22        }, "#pp-nav li")
23    }

プラグインのURLは以下になります。
https://alvarotrigo.com/pagePiling/

HTML

    <div id="pagepiling">
        <div class="contents" id="section1">
            <!--contents01-->
        </div>
        <div class="contents" id="section2">
            <!--contents02-->
        </div>
        <div class="contents" id="section3">
            <!--contents03-->
        </div>
        <div class="contents" id="section4">
            <!--contents04-->
        </div>
    </div>

　　<ul id="menu">
   　 <li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
   　 <li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
   　 <li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
   　 <li data-menuanchor="page4"><a href="#page4">Page 4</a></li>
　  </ul>

JavaScript

$(document).ready(function () {
    $('#pagepiling').pagepiling({
        menu: '#menu',
        anchors: ['page1', 'page2', 'page3', 'page4'],
        navigation: {
            'position': 'right',
            'tooltips': ['section1', 'section2', 'section3', 'section4']
        },
        scrollingSpeed: 1000,
        sectionSelector: '.contents'
    });
});

jqueryのバージョンは1.9.1です。

よろしくお願いいたします。

m.ts10806

2019/02/28 04:23

これプラグイン本体のコードですかね。念のため取得先（公式ページとか）のURLのリンク置いていただけますか？あと対象のHTMLと発火用JavaScriptの記述も

ayaka_000

2019/02/28 04:26

そうです。 URLは以下になります。 https://alvarotrigo.com/pagePiling/ <div id="pagepiling"> <div class="contents" id="section1">  </div> <div class="contents" id="section2">  </div> <div class="contents" id="section3">  </div> <div class="contents" id="section4">  </div> </div> $(document).ready(function() { $('#pagepiling').pagepiling({ menu: '#menu', anchors: ['page1', 'page2', 'page3','page4'], navigation: { 'position': 'right', 'tooltips': ['section1', 'section2', 'section3', 'section4'] }, scrollingSpeed: 1000, sectionSelector: '.contents' }); }); よろしくお願いいたします。

m.ts10806

2019/02/28 04:27

質問は編集できますので適宜追記いただければと。こちらにコードを書かれてもマークダウンが使えませんので。

ayaka_000

2019/02/28 04:27

失礼いたしました。

m.ts10806

2019/02/28 04:29 編集

ちなみに、jQueryはどのバージョンをお使いですか？（も追記願います）公式サイトでは1.8.3のようですが

ayaka_000

2019/02/28 04:31

追記しました。

m.ts10806

2019/02/28 04:33 編集

すみません。細かくて申し訳ないのですが、 HTMLとJavaScriptが別ファイルのなのでしたらコードブロックをわけてください。「コピペでそのまま実行できる」が基本です。あとインデントはそろえられた方が良いですね・・。

m.ts10806

2019/02/28 04:37

pagepilingに指定されている#menu部分のHTMLも必要ですね。

m.ts10806

2019/02/28 04:38

回答者が補完しなければならない部分が多いとそれだけ的確な回答から離れていき、問題解決まで時間がかかってしまいます。

ayaka_000

2019/02/28 04:40

失礼いたしました。

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

回答1件

ベストアンサー

mouseenterをトリガーにツールチップが出るようになっていて、mouseleaveによりツールチップが削除されるようになっていますね。
しかも「this」なのでhoverした要素しか出るようになっていません。

設定でon/off切り替えがあるのかと思ったらそうでもないようです。
ということで、
下記はひとまずざくっとコメントアウト（削除だと何か起きたときにすぐ戻せないので）しましょう。

js
1/*
2        b(h).on({
3            mouseenter: function () {
4                var a = b(this).data("tooltip");
5                b('<div class="pp-tooltip ' + c.navigation.position + '">' + a + "</div>").hide().appendTo(b(this)).fadeIn(200)
6            },
7            mouseleave: function () {
8                b(this).find(".pp-tooltip").fadeOut(200, function () {
9                    b(this).remove()
10                })
11            }
12        }, "#pp-nav li")
13*/

あとは、ナビゲーション部分の下記が元の処理からとれればいけそうです。

下記のようにして動的要素が取得可能か確認

js
1$(function() {
2	$('#pagepiling').pagepiling({
3		menu: '#menu',
4		anchors: ['page1', 'page2', 'page3', 'page4'],
5		navigation: {
6			'position': 'right',
7			'tooltips': ['section1', 'section2', 'section3', 'section4']
8		},
9		scrollingSpeed: 1000,
10		sectionSelector: '.contents'
11	});
12    
13    console.log($('#pp-nav li').length);
14});
15
16//4　と出力された

内容を確認

js
1    console.log($('#pp-nav li')[0]);
2/*
3<li data-tooltip="section1">
4  <a href="#page1" class="">
5    <span style="border-color: rgb(0, 0, 0);"></span>
6  </a>
7</li>
8*/

これならなんとかなりそうですね。

あとは、#pp-navの子liをループして埋め込んでいく感じですね。
data-tooltipの文言が受け取れるか確認

js
1    $('#pp-nav li').each(function(index, element){
2      console.log($(this).data("tooltip"));
3    });
4
5/*
6section1
7section2
8section3
9section4
10*/

元の処理のmouseenter時の処理をもってくる

js
1    
2    $('#pp-nav li').each(function(index, element){
3        var tooltip = $(this).data('tooltip');
4        $('<div class="pp-tooltip ' + options.navigation.position +'">' + tooltip + '</div>').hide().appendTo($(this)).fadeIn(200);
5    })
6
7// Uncaught ReferenceError: options is not defined

options は確かに、pagepiling内で定義されている変数なので、スコープの関係で持って来れません。
ただ、これは設定部分そのままなので、とりあえず設定と同じものを固定で入れます。

js
1    $('#pp-nav li').each(function(index, element){
2        var tooltip = $(this).data('tooltip');
3        $('<div class="pp-tooltip right">' + tooltip + '</div>').hide().appendTo($(this)).fadeIn(200);
4    })

hover時と同じところに挿入できたことを確認。

私のほうは本当に最低限の構成しかないので最後の画像にあるように文字色が白ですが、このあたりは調整かと思います。

蛇足：
optionsも含めていろいろ調整

js
1$(function() {
2    const pagepiling_setting = {
3		menu: '#menu',
4		anchors: ['page1', 'page2', 'page3', 'page4'],
5		navigation: {
6			'position': 'right',
7			'tooltips': ['section1', 'section2', 'section3', 'section4']
8		},
9		scrollingSpeed: 1000,
10		sectionSelector: '.contents'
11	};
12	$('#pagepiling').pagepiling(pagepiling_setting);
13    
14    $('#pp-nav li').each(function(index, element){
15        var tooltip = $(this).data('tooltip');
16        $('<div class="pp-tooltip '+pagepiling_setting.navigation.position+'">' + tooltip + '</div>').hide().appendTo($(this)).fadeIn(200);
17    })
18});

投稿2019/02/28 05:22

編集2019/02/28 05:39

m.ts10806

総合スコア80850

ayaka_000

2019/02/28 05:37

丁寧にご回答いただき、大変助かりました。ありがとうございました。

m.ts10806

2019/02/28 05:40

最終形だけではなく、そこに至るまでの試行錯誤の過程も参考にしていただければと思います。 ※ただ、プラグイン本体に改修を入れるって動いていた機能に影響することもあって、かなり危険なことでもあるのでご注意ください。

ayaka_000

2019/02/28 05:49

ありがとうございました。ちなみにですが、tooltipがactiveの状態のときに、色を変えるようにすることは難しいでしょうか…

m.ts10806

2019/02/28 05:58

activeな状態のときにとなると、どういう操作をしたときになりますか？

ayaka_000

2019/02/28 06:00

ナビゲーションの●(pp-nav)は、該当するページにいるときは色が変わるようになっているのですが・・・ tooltipのフォントも同様に色が変えられると嬉しいです。

m.ts10806

2019/02/28 06:10

ああ、なるほど・・・tooltipも「今このページだよ」と分かるように、ですね。色々やり方がありそうですねー。 bodyのclassの変化でイベントとるか、各tooltip配下のaタグにactiveがつくみたいだからそこの変化でイベントとるかはたまた、本体コードのactiveつけてるところに差し込むか

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