减小工具提示箭头的大小

Question

我想减少在jquery中加载的工具提示的大小。现在箭头以大尺寸显示。我需要减小箭头的大小，无论文本大小如何都应该出现在中间

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

.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: 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

您需要减少边框的边，而不是宽度，因为箭头是基于边框的。 对于弹出位置，您可以使用left和top来操纵它 我注意到你从鼠标位置获得水平位置希望不是很好。

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

＆＃13;

＆＃13;

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 })
});
  });
});

＆＃13;

.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: 30%;
  width: 0;
  border-top: 10px solid black;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transform: rotate(180deg);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;