掲示板のような感じでアンカータグに乗っかったときにアンカー先のレスポンスが吹き出しで出るようにする

# 概要

某掲示板みたいにアンカーにマウスが乗っかったとき、アンカー先のレスポンスが吹き出すような仕組み（以下のような感じ）を作りたかったので作りました。
かなり探りさぐりだったので、拙いですが参考になれば幸いです。

![ankertag_拡大＿.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408723/961dfec1-3d08-41ad-f76a-f65dfa29be96.gif)


# 環境

言語|python、javascript(jquery)
---|---|---
DB|postgres
フレームワーク|flask

作り方

1. サーバ側にデータ取得用URLを仕込む
1. javascript(jquery)でデータ取得
1. 表示する

# 詳細

### 1. サーバ側
サーバ側に以下のようなものを仕込んでおく
json型で返すようにしています

```python.py
@bbs.route("/thread_json/<thread_get>/<range_nmb>", methods=["POST"])
def thred_json_return(thread_get,range_nmb):
    if thread_search(thread_get) == False:
        return "not exist thread"
    thread = thread_search(thread_get) 
    return_article = article_acq(mode="ONLY_NUM", thread_arg = thread, range1 = range_nmb)
    
    for r in return_article:
        rejson = {
                    "Article": {
                        "id": r.id, 
                        "article_count": r.article_count, 
                        "pub_date": str(r.pub_date), 
                        "userid": r.userid, 
                        "name": r.name, 
                        "article": r.article
                        }
                 }

    return jsonify(rejson)
```

### クライアント側

jqueryでデータを取得
表示用のイベントも登録しておく

```javascript.js
$(document).on(
    'mouseleave', ".tooltips", function(){
        $(this).remove();
});

$(document).on(
    'mouseleave', ".back_anker", function(){
        let flag = false;
        let jump_link_temp = $(this).text();
        let jump_link = jump_link_temp.replace( />>/g, "");
        let this_tooltips_id = '#tooltips_' + jump_link;
        setTimeout(function(){
        if ($(this_tooltips_id + ':hover').length === 0) {
            $(this_tooltips_id).remove();
        }
        },500);
});

$(document).on(
    'mouseenter', ".back_anker", function(){
           //試験環境
           var article_url = "http://0.0.0.0:8080/thread_json/"
           let url = location.pathname;
           let url_split = url.split('/');
           var thread = url_split[2];
           let jump_link_temp = $(this).text();
           let jump_link = jump_link_temp.replace( />>/g, "");
           var tooltipdiv = "tooltips_"

           //already exist stop
           if (url_split[1] != "thread") {
               return 0;
           }
           if ( document.getElementById( tooltipdiv + jump_link ) != null ) {
               return 0;
               console.log("exist!");
           }

           $.ajax({
               url:article_url + thread + "/" + jump_link,
               type: 'POST',
               dataType: 'json',
               contentType: false,
               processData: false,
               })

           .done((data) => {
               let divid = tooltipdiv + data.Article.article_count;
               let reply_article_position = $(this).offset();
               let tooltips_offset = new Object();
               tooltips_offset.left = reply_article_position.left + 30;
               tooltips_offset.top = reply_article_position.top;
               $(".anker_tooltip").append('<div id=' + divid  + ' class="tooltips">' + message_html(data.Article.article_count, data.Article.name, data.Article.pub_date, data.Article.userid, data.Article.article) + '</div>');
               $('#' + divid).offset(tooltips_offset)
           })
           .fail((XMLHttpRequest, textStatus, errorThrown) => {
               console.log("XMLHttpRequest : " + XMLHttpRequest.status);
               console.log("textStatus     : " + textStatus);
               console.log("errorThrown    : " + errorThrown.message);
           })
           .always((data) => {
               //console.log("alway");
           })
});
```

### 困ったところ

アンカータグからマウスが外れる
↓
1 吹き出しを削除する
or
2 マウスが吹き出しに乗っかっているから削除しない

2の場合吹き出しに乗っかっているか判定するという処理がなかなか見つからなくて困ってましたが
以下のような方法で実現可能だとわかりました。

```javascript.js
        if ($(this_tooltips_id + ':hover').length === 0)
```

なんとか見つかってよかった

### 参考にしたページ

いろいろあったので、整理完了次第投稿します