ツールチップを上に移動する

Question

リンクの最上部に表示するようにツールチップを移動したいのですが、リンクの一番下に表示されます。

jQuery(function(){ 
 
    jQuery(document).ready(function(){ 
 
    jQuery('.masterTooltip').hover(function(){ 
 
      // Hover over code 
 
      var title = jQuery(this).attr('data-original-title'); 
 
      jQuery(this).data('tipText', title).removeAttr('title'); 
 
      jQuery('<p class="notetool fade top in"></p>') 
 
      .text(title) 
 
      .appendTo('body') 
 
      .fadeIn('slow'); 
 
    }, function() { 
 
      // Hover out code 
 
      jQuery(this).attr('title', jQuery(this).data('tipText')); 
 
      jQuery('.notetool').remove(); 
 
    }).mousemove(function(e) { 
 
      //var mousex = e.pageX; //Get X coordinates 
 
      var mousey = e.pageY + 10; //Get Y coordinates 
 
      jQuery('.notetool').css({ top: mousey, left: 0 }) 
 
    }); 
 
    }); 
 
});

.notetool { 
 
    display:none; 
 
    position:absolute; 
 
    color: #0f0025; 
 
    background-color: #FFEF93; 
 
    border: 1px solid #F1D031; 
 
    border-radius:5px; 
 
    padding:10px; 
 
    font-size:12px Arial; 
 
} 
 
.notetool:before { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: 50%; 
 
    width: 0; 
 
    border-top: 5px solid black; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    /*transform: rotate(180deg); */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<a href="#" data-toggle="tooltip" class="masterTooltip" data-original-title=" IPL?" title="IPL?"> IPL?</a>

Answer 1

手動でツールチップをやっているので、私は以下のスニペットにコードを変更します。

私は、三角形の向きとツールチップの位置を変更しました。あなたの状況に役立つことを願っています。

注：この実装では、ツールチップを常に上にポップアップ表示します（前の下のように）。

jQuery(function(){ 
 
\t jQuery(document).ready(function(){ 
 
jQuery('.masterTooltip').hover(function(){ 
 
     // Hover over code 
 
     var title = jQuery(this).attr('data-original-title'); 
 
     jQuery(this).data('tipText', title).removeAttr('title'); 
 
     jQuery('<p class="notetool fade top in"></p>') 
 
     .text(title) 
 
     .appendTo('body') 
 
     .fadeIn('slow'); 
 
}, function() { 
 
     // Hover out code 
 
     jQuery(this).attr('title', jQuery(this).data('tipText')); 
 
     jQuery('.notetool').remove(); 
 
}).mousemove(function(e) { 
 
     //var mousex = e.pageX; //Get X coordinates 
 
     var mousey = e.pageY - 70; //Get Y coordinates 
 
     jQuery('.notetool') 
 
     .css({ top: mousey, left: 0 }) 
 
}); 
 
    }); 
 
});

.notetool { 
 
\t display:none; 
 
\t position:absolute; 
 
\t color: #0f0025; 
 
    background-color: #FFEF93; 
 
    border: 1px solid #F1D031; 
 
\t border-radius:5px; 
 
\t padding:10px; 
 
\t font-size:12px Arial; 
 
} 
 
.notetool:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    width: 0; 
 
    border-bottom: 5px solid black; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    /*transform: rotate(180deg); */ 
 
} 
 

 
a{ /* added only to push the link a little bit lower from the top of the page in order visualizie the tooltip in the snippet */ 
 
    display: block; 
 
    margin-top: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<a href="#" data-toggle="tooltip" class="masterTooltip" data-original-title=" IPL?" title="IPL?"> IPL?</a>

Answer 2

私はちょうどあなたの条件として、その作業をチェックしてみてください、あなたのコードを変更しました。

jQuery(function(){ 
 
\t jQuery(document).ready(function(){ 
 
jQuery('.masterTooltip').hover(function(){ 
 
     // Hover over code 
 
     var title = jQuery(this).attr('data-original-title'); 
 
     jQuery(this).data('tipText', title).removeAttr('title'); 
 
     jQuery('<p class="notetool fade top in"></p>') 
 
     .text(title) 
 
     .appendTo('body') 
 
     .fadeIn('slow'); 
 
}, function() { 
 
     // Hover out code 
 
     jQuery(this).attr('title', jQuery(this).data('tipText')); 
 
     jQuery('.notetool').remove(); 
 
}).mousemove(function(e) { 
 
     //var mousex = e.pageX; //Get X coordinates 
 
     var mousey = e.pageY - 70; //Get Y coordinates 
 
     jQuery('.notetool') 
 
     .css({ top: mousey, left: 0 }) 
 
}); 
 
    }); 
 
});

.notetool { 
 
\t display:none; 
 
\t position:absolute; 
 
\t color: #0f0025; 
 
    background-color: #FFEF93; 
 
    border: 1px solid #F1D031; 
 
\t border-radius:5px; 
 
\t padding:10px; 
 
\t font-size:12px Arial; 
 
} 
 
.notetool:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 45%; 
 
    width: 0; 
 
    border-top: 5px solid black; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    /*transform: rotate(180deg); */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<br><br><br> 
 
<a href="#" data-toggle="tooltip" class="masterTooltip" data-original-title=" IPL?" title="IPL?"> IPL?</a>