キャッシュ問題：jQuery.attr()、jQuery.data()、両方でキャッシュ問題が発生する。

ネイティブスクリプトで、ヘルパー関数を作成。

setAttrs(el, attrs) //複数の属性を追加。attrsは配列で指定 dataArys(elem) //data属性を配列化して返す。 //IDを取得、ない場合はtimestampでIDを設定して返す。 nJa_.func.getID($tg,$pre)

$('#kunaiop').nja_kunai({
  hint_msg: 'オプションのみでdata属性ありません。',
  hint_design: 'bubble',//bubble,skich,skich-a
  hint_number: '11',
  hint_display: 'fixed',//show, fixed
  hint_mato: 'gray',//pink, red, info, gray, show, ''
});

//DOM属性指定一覧
//メッセージ
data-hint_msg: 'ヒントの文言',
//表示形式：ヒントボタン・ヒント・固定（開閉なし）
data-hint_display: 'show',//hide, fixed
//ナンバリング対応
data-hint_number: '数字',
//デザインテンプレートの導入化
data-hint_design: 'デザイン', // bubble. skich
//ポジション指定かつ表示位置の自動修正
data-hint_position: "left" //top, left, right, bottom
// 複数DOMにも対応。親要素で範囲指定
data-hint_scope="tbody > tr> td > input[type='checkbox']"


//オプション
hint_msg: 'メッセージ',
hint_design: 'skich',//bubble,skich-a,deep
hint_msgclass: 'hint-msg',
hint_number: '',
hint_display: 'hide',//show, fixed
hint_position: 'top',//left,top,bottom,right,pop,
hint_scope: 'self',
hint_mato: 'show',
hint_fixed: false,

//レスポンシブ・スクロール対応済。間引き対応。
//イベントに名前空間導入。destory時のメモリーリーク対策済

//全部のWrap

//ヒントなし

  

    
?
  

//ヒントあり

  

    

      

        

          

        
        

          

            
5
          
          
ヒントだぞだぞ！！
        
    
  

//CSS
  /* Tool Tips KUNAI NINJA */
  #butai { position: absolute; top:0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none!important; }
  #enmaku { position: relative; width: 100%; height: 100%; overflow: hidden; pointer-events: none!important; }

  .mato {
    background-color: transparent;
    display: none;
    position: absolute;
    pointer-events: none!important;
    z-index: 999960;
  }

  .mato.show {
    -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;
  }
  .mato.gray {
    -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;
  }
  .mato.red {
    -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;
  }
  .mato.pink {
    -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;
  }
  .mato.info {
    -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;
  }

  .onlyway.mato-t {border-left:0!important; border-right:0!important; border-bottom:0!important; border-radius:0!important;}
  .onlyway.mato-l {border-top:0!important; border-right:0!important; border-bottom:0!important; border-radius:0!important;}
  .onlyway.mato-r {border-top:0!important; border-left:0!important; border-bottom:0!important; border-radius:0!important;}
  .onlyway.mato-b {border-top:0!important; border-left:0!important; border-right:0!important; border-radius:0!important;}

  .n971 {
    position: absolute;
    display: inline-block;     /* 横幅を自動で変更 */
    z-index: 999960;
    pointer-events: none!important;
    vertical-align: top;
  }

  .n971 > .inr,
  .n971 > .inr > .hintbox {
  display:-webkit-box;
  display:-ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-start!important;
  justify-content: flex-start!important;
  -webkit-align-items: flex-start!important;
  -webkit-align-items: flex-start;
  align-items: flex-start!important;
  }

  .n971.n971-r > .inr > .hintbox,
  .n971.n971-l > .inr > .hintbox {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  .n971.n971-l > .inr,
  .n971.n971-l > .inr > .hintbox {
  -webkit-justify-content: flex-end!important;
  justify-content: flex-end!important;
  text-align: right;
  }

  .n971 > .inr > .hintbox > .num, .n971 > .inr > .hintbox > .hint-msg {
    position:relative;
  }

  .n971.n971-b { top: calc(100% + 1rem); }
  .n971.n971-t { bottom: calc(100% + .3rem)!important; }
  .n971.n971-r { left: calc(100% + .3rem); }
  .n971.n971-l { right: calc(100% + .3rem); }

  /*
  .n971.n971-l > .inr > .hintbox > .num { margin-left: -2rem; align-self: top;}
  */
  .n971.n971-r > .inr > .hintbox > .num,
  .n971.n971-l > .inr > .hintbox > .num  { padding: 0 .5rem .5rem; }

  .n971 > .inr > .hintbox > .hint-msg { padding: 0 .5rem; }

  .n971.n971-l > .inr > .hintbox > .hint-msg,
  .n971.n971-r > .inr > .hintbox > .hint-msg {
  text-orientation: upright;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-align: left;
  display: inline-block;
  }

  .n971 > .inr > .shade > .hint-msg {
    -webkit-filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.5))!important;
    filter: drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.5))!important;
    color: #fff;
  }

  .n971.n971-l {text-align: right;}

  .mato .n971-showHint {position: absolute; z-index: 999995;display: inline-block;  pointer-events: auto;}
  .mato-t .n971-showHint {top:-24px; left:-8px;}
  .mato-b .n971-showHint {bottom:-32px; left:-8px;}
  .mato-l .n971-showHint {top: 8px; left:-24px;}
  .mato-r .n971-showHint {top: 8px; right:-24px;}

  .mato-inner {
    position: relative; display:block; width:100%; height:100%;
    pointer-events: none!important;
  }
  .mato-inner .n971-closeHint { position: absolute; top:-9px; z-index: 999952; display: inline-block;  pointer-events: auto;}

  .mato-inner.mato-t .n971-closeHint {left:-9px;}
  .mato-inner.mato-b .n971-closeHint, .mato-inner.mato-r .n971-closeHint { left: 0; }
  .mato-inner.mato-l .n971-closeHint { right:-9px; }

  .n971.n971-r.sticky, .n971.n971-l.sticky {
    position: -webkit-sticky; /* safari対応 */
    position: sticky;
    top: 5px;
  }

  .n971.n971-r.sticky { padding-left: 2.3rem; }
  .n971.n971-l.sticky {  padding-right: 2.3rem; }

  .kage-fil {
    -webkit-filter: drop-shadow(0 0 30px rgba(0,0,0,.8));
    filter: drop-shadow(0 0 30px rgba(0,0,0,.8));
  }

//input要素に直接指定できる。
input type="checkbox" class="checkbox kunaib" data-hint_msg="全選択" data-hint_display="fixed"

//親要素でターゲットの範囲を指定して実行
//table class="kunai" data-hint_scope="tbody > tr> th > input[type='checkbox']"