「クリックして開くツールチップ」の中にテキストリンクを入れたい

Question

前提・実現したいことと問題点

こちらの記事を参考に「クリックして開くツールチップ」を作っています。
https://qiita.com/mrd-takahashi/items/4f27927ced6275b16969

クリックして開き、またクリックすると隠れる、という仕様のツールチップです。
表示まではできたのですが、
さらにツールチップの中のテキストにリンクを付けたい。というところで詰んでしまいました。

※hoverタイプにすることや、閉じるボタンを加えることは極力したくないです...

該当のソースコード

jsの最後の方にある「表示されたツールチップを隠す処理（マウスクリックで全て隠す）」が、
リンクのクリックも無効にしてしまっている、というところまではわかりましたが、
どうすればクリックできるのか...

<div class="con">
  <a href="#note1" class="clickToolTip"><img src="images.png"></a>
  <p id="note1" class="toolTip invisible">
　　　<a href="index.html">テキストリンク</a></a>
　</p>
</div>

.invisible{
 display: none;
}
 
a.clickToolTip{
 margin: 0;
 padding: 2px 6px;
 text-decoration: none;
 color: #fff;
 font-size: 12px;
}
p.toolTip{
 margin: 0;
 padding: 1em;
 width: 70%;
 background-color: #a92524;
 -moz-border-radius: 5px;
 top: 100px;
 left: 0;
 position: absolute;
 z-index: 50;
 font-size: 1rem;
 line-height: 1.8;
 font-weight: bold;
}

$(function(){
    // ツールチップ表示処理
    $('a.clickToolTip').click(function(){
        // リンクの #note** を取得
        var targetNote = $(this).attr('href');

        // [?]の座標を取得
        var position = $(this).position();
        var newPositionTop = position.top +10;  /* + 数値で下方向へ移動 */
        var newPositionLeft = position.left + 35;  /* + 数値で右方向へ移動 */

        // ツールチップの位置を調整
        $('p'+targetNote).css({'top': newPositionTop + 'px', 'left': newPositionLeft + 'px'});

        // ツールチップの class="invisible" を削除
        $('p'+targetNote).removeClass('invisible');
    });

    // 表示されたツールチップを隠す処理（マウスクリックで全て隠す）
    $('html').mousedown(function(){
        $('p.toolTip').addClass('invisible');
        });
    // aクリックを無効
    $('a.clickToolTip').click(function(){
        return false;
        });
});

試したこと

javascriptはからっきしのためcssで無理やりどうにかできないかと、aタグに

position: absolute;
z-index: 100;

をつけてみたりもしましたがダメでした。。

どなたかお知恵を貸していただけますと助かります。
どうぞよろしくお願いします。

Comments

[m.ts10806]

装飾部分もきちんと提示された方が良いと思います。
本当にその部分に問題ないのか誰も判断できませんし、実際やっていることが再現できません。
お手元のコードをご提示ください。

[nyrrrr]

そうですね、失礼いたしました。
css追記いたしました。

Answer 1

    //$('html').mousedown(function(){
    $('html').click(function(){

Comments

[nyrrrr]

ご回答ありがとうございます！
ですが、ツールチップが表示されなくなってしまいました...

[x_x]

表示されないのは元からだと思いますよ。提示コードと参考サイトを比べてみてください。

[nyrrrr]

!!!
提示していたHTMLが間違えていました。。target ではなく href ですね。
教えていただきありがとうございます。
無事テキストリンク押せるようになりました！