移动工具提示出现在顶部

Question

我想将工具提示移动到hover.noe链接顶部显示我出现在链接的底部。

＆＃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: 50%;
  width: 0;
  border-top: 5px solid black;
  border-left: 5px solid transparent;
  border-right: 5px 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;

Answer 1

由于您手动执行工具提示，我更改了下面代码段中的代码。

我刚刚更改了三角形方向和工具提示位置。希望它有助于你的情况。

注意：此实现始终在顶部弹出工具提示（如前面的底部）。

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 - 70; //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;
  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(){
	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 {
	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;
  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>