Question

我正在制作这个简单的工具提示，我想将工具提示底部放在父元素的顶部。我想通过获取工具提示元素的高度并将此数字设置为负数来实现此目的。问题是，在我悬停元素时，工具提示高度为0，根据console.log（）;

$('.tooltip').hover(function() {
    var content = $(this).data('tip-content');
    var element	= $(this).find('.tip-content');

    if(element.length == 0 ) {
        var html 	= $('<p class="tip-content">' + content + '</p>');
        var height	= html.height();
        console.log(height);
        html.css('top', - height);
        $(this).prepend(html);
    } else {
        element.remove();
    }
});

.element {
    height: 50px;
    width: 50px;
    margin: 50px auto;
    background: #000;
}

.tooltip {
	position: relative;	
}

.tooltip .tip-content {
	width: 180px;
	margin-left: -98px;
	padding: 10px 5px;
	position: absolute;
	left: 50%;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
	background: #294a72;
	font-size: 0.75em;
	color: #fff;
	text-align: center;
}

.tooltip .tip-content:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-top-color: #294a72;
	border-width: 5px;
	margin-left: -5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element tooltip" data-tip-content="This is a test content">
</div>

Answer 1

当您检查高度时，该元素尚未添加到DOM中，因此没有高度。您只需切换语句的顺序即可。即使添加了元素，jQuery也可以并且将会更改元素的CSS。

var html = $('<p class="tip-content">' + content + '</p>');
$(this).prepend(html);  //This line must go before the next
var height  = html.height();
console.log(height);

然而，你仍然遗漏了一些碎片。 height() 不包含边距或填充。要获得填充，您可以使用outerHeight()，但是您必须从CSS读取或使用硬编码值。更糟糕的是，你的箭头正在使用一个伪元素，其中 *不能* 被DOM遍历读取，所以你最好的选择就是硬编码，遗憾的是。

更好的身高计算可能如下：

var ARROW_HEIGHT = 5;
html.outerHeight() + parseInt(html.css('marginBottom'), 10) + ARROW_HEIGHT;

Answer 2

我认为你必须在HTML之前添加，然后然后获取高度并重新定位元素。现在，您获得的是变量的高度，而不是HTML元素。

Answer 3

对于html对象自动获取高度，首先需要放入DOM。这就是你得到高度= 0的原因。你需要首先追加你的物体，然后得到高度。

请参阅我的示例：https://jsfiddle.net/bwun82q4/

$('.tooltip').hover(function() {
var content = $(this).data('tip-content');
var element = $(this).find('.tip-content');

if(element.length == 0 ) {
    var html    = $('<p class="tip-content">' + content + '</p>');
    var height  = html.height();
    console.log(height);
    html.css('top', - height);
    $(this).prepend(html);

    $(this).find("p").css("top",- $(this).find("p").height());
} else {
    element.remove();
}});

Answer 4

你只需要获得'工具提示'的高度而不是'tip-content'。

$('.tooltip').hover(function() {
    var content = $(this).data('tip-content');
    var element	= $(this).find('.tip-content');

    if(element.length == 0 ) {
        var html 	= $('<p class="tip-content">' + content + '</p>');
        // Get height of parent element
        var height	= $(this).height();
        console.log(height);
        html.css('top', - height);
        $(this).prepend(html);
    } else {
        element.remove();
    }
});

.element {
    height: 50px;
    width: 50px;
    margin: 50px auto;
    background: #000;
}

.tooltip {
	position: relative;	
}

.tooltip .tip-content {
	width: 180px;
	margin-left: -98px;
	padding: 10px 5px;
	position: absolute;
	left: 50%;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
	background: #294a72;
	font-size: 0.75em;
	color: #fff;
	text-align: center;
}

.tooltip .tip-content:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-top-color: #294a72;
	border-width: 5px;
	margin-left: -5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element tooltip" data-tip-content="This is a test content">
</div>

定位顶部父元素的底部元素

4 个答案: