減小工具提示的大小箭頭

Question

我想減小jquery中加載的工具提示的大小。現在箭頭出現在大尺寸中。我減小了箭頭的大小，並且應該出現在中間，無論大小如何文字

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 + 20; //Get X coordinates 
 
     var mousey = e.pageY + 10; //Get Y coordinates 
 
     jQuery('.notetool') 
 
     .css({ top: mousey, left: mousex }) 
 
}); 
 
    }); 
 
});

.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; 
 
    bottom: 100%; 
 
    left: 40%; 
 
    width: 0; 
 
    border-top: 20px solid black; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px 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

需要，因爲箭頭BUIT基礎上邊框，以減少邊界不寬的側面。 對於您可以處理使用left和top
我已經注意到的是，你都可以從鼠標位置的心願水平位置酥料餅的位置不是很好。

jQuery('.notetool') 
     .css({ top: mousey, left: 0 }); 

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 + 10; //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; 
 
    bottom: 100%; 
 
    left: 30%; 
 
    width: 0; 
 
    border-top: 10px solid black; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px 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>