この文章はダミーです。夏は夜。月の頃はさらなり、闇もなほ、蛍のおほく飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くも、をかし。雨など降るも、をかし。この文章はダミーです。秋は夕暮れ。夕日のさして、山の端いと近くなりたるに、烏の、寝所へ行くとて、三つ四つ、二つ三つなど、飛び急ぐさへ、あはれなり。まいて、雁などのつらねたるが、いと小さく見ゆるは、いとをかし。日入りはてて、風の音、虫の音など、はた、言ふべきにあらず。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。

• 位置調整 -> a-text.css && curryq.css
• data-target -> ターゲット設定OK!
• メッセージ位置の自動調整-> 上下OK
• 上下のみ対応-> 左右は非対応（css:pin-,skrach）
• ポジションスタイルシートの見直し -> sideout 追加
• hintの幅の見直し->

//枠線で囲む場合
data-border="yellow" //pink, red, gray, info,
data-padding="12"
//又は、オプションでclass_border, padding

//ヒントメッセージ
data-hint="DATA属性でSCOPEを設定"
//又は、オプションでhint
//html文字列でもOK、ただし、data-hint=''でエスケープに注意

//タグ
data-tag="※"
//又は、オプションでtag
//html文字列でもOK、ただし、data-hint=''でエスケープに注意

//ヒント用のクラス
data-hint-class="DATA属性でSCOPEを設定"
//又は class_hint

//ピン用のクラス
data-pin-class="DATA属性でSCOPEを設定"
//又は class_pin

//ターゲットを複数の子要素にする場合
data-target="tbody > tr> th > input[type='checkbox']"


//オプション

//hintに入れる要素を生成要素にする
  let $ts = el$({class:'hoge'},'メッセージを入れてリンクボタンをつける！',el$({class:'btn btn-secondary btn-sm text-white'},'ボタン'));

  fn$.pin({show:'click',hint:$ts,})(document.getElementById('ireko'));

//CSS
  /* pin  */
  #pin-box { position: absolute; top:0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;}
  #pin-box-inner { position: relative; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }

  .pin-point { position: absolute; z-index: 999990; background-color: transparent; pointer-events: none; }
  .pin-point.fix { position: fixed!important; }

  .pin-point-inner { position: relative; display:block; width:100%; height:100%; }

  .pin-hint { pointer-events: auto; }
  .pin-hint > .hintbox {min-width: 50vw; }
  .t-r.out.pin-hint > .hintbox, .b-r.out.pin-hint > .hintbox { text-align: right; }

  .pin-point.yellow {
    opacity: 1;
    -webkit-filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
    filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
    border: 2px solid #ffc107 !important;
    border-radius: 3px;
    background-color: transparent!important;
  }
  .pin-point.gray {
    opacity: 1;
    -webkit-filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
    filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
    border: 4px solid #ccc !important;
    border-radius: 3px;
    background-color: transparent!important;
  }
  .pin-point.red {
    opacity: 1;
    -webkit-filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
    filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
    border: 2px solid red !important;
    border-radius: 3px;
    background-color: transparent!important;
  }
  .pin-point.pink {
    opacity: 1;
    -webkit-filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
    filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
    border: 4px solid #f8bbd0 !important;
    border-radius: 3px;
    background-color: transparent!important;
  }
  .pin-point.info {
    opacity: 1;
    -webkit-filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
    filter: drop-shadow(0px 1px 2px rgba(222,222,222,.2));
    border: 4px solid #33b5e5 !important;
    border-radius: 3px;
    background-color: transparent!important;
  }