利用可能なスペースに基づいてツールチップの位置を変更する方法

下部に十分なスペースがない場合、またはその逆の場合、ツールチップを上に表示するにはどうすればよいですか？ CSSのハックはありますか？それともJSを使って計算する必要がありますか？利用可能なスペースに基づいてツールチップの位置を変更する方法

.foo { 
 
    position: relative; 
 
} 
 

 
.tooltip { 
 
    display: none; 
 
} 
 

 
.foo a:focus+.tooltip { 
 
    display: block; 
 
    background: black; 
 
    position: absolute; 
 
    color: white; 
 
    padding: 5px; 
 
    z-index: 1; 
 
}

<div class="foo"><a href="#" class="foo"> this is a link</a> 
 
    <div class="tooltip">this is a tooltip</div> 
 
</div> 
 
<div class="foo"><a href="#" class="link">this is a link</a> 
 
    <div class="tooltip">this is a tooltip</div> 
 
</div>

出典

2017-12-29 Shakil Ahmed

もあなたはこれを試すことができます。それはあなたを助けるかもしれません。

CSS

.foo { 
    position: relative; 
} 

.tooltip { 
    display: none; 
} 

.foo a:focus+.tooltip { 
    display: block; 
    background: black; 
    position: absolute; 
    color: white; 
    padding: 5px; 
    z-index: 1; 
}

Javascriptを

$("#tt").css({ top: $("#ll").position().top - 30 });

HTML動的にCSSによる

<br> 
<br> 
<div class="foo"><a href="#" class="foo" id="ll"> this is a link</a> 
    <div class="tooltip" id="tt">this is a tooltip</div> 
</div>

出典

2017-12-29 07:09:29

残念ながらあなたはそれはできません。常にクラスを作成し、そのクラスの下にある要素に手動で追加することができます。しかし、動的な動作が必要な場合は、スペースの可用性を判断するためにJSの助けが必要です。

出典

2017-12-29 07:13:09

ブートストラップツールチップを使用できます。以下のコードが役に立たない場合は、

.foo { 
 
    position: relative; 
 
} 
 

 
.tooltip { 
 
    display: none; 
 
} 
 

 
.foo a:focus+.tooltip { 
 
    display: block; 
 
    background: black; 
 
    position: absolute; 
 
    color: white; 
 
    padding: 5px; 
 
    z-index: 1; 
 
} 
 

 
.foo a:focus+.tooltip.top { 
 
    top: -1.5em; 
 
    } 
 

 
    .foo a:focus+.tooltip.bottom { 
 
    top: 1em; 
 
    }

<div class="foo"><a href="#" class="foo"> this is a link</a> 
 
    <div class="tooltip top">this is a tooltip</div> 
 
</div> 
 
<div class="foo"><a href="#" class="link">this is a link</a> 
 
    <div class="tooltip bottom">this is a tooltip</div> 
 
</div>

出典

2017-12-29 07:16:53

あなたはページ上の要素の位置を計算するために、JSを使用する必要があります。動的ページでは、要素が上、下、左、右の順に表示されます。

リンクが画面の前半にある場合は、.tooltipTopを追加し、.tooltipBottomクラスを追加します。

コード内に複数のリンクを追加することでテストできます。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Side Project</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<style> 
 
body{ 
 
\t height:auto; 
 
} 
 

 
.foo { position: relative;} 
 

 
.tooltip { 
 
    position: absolute; 
 
    display: none; 
 
    background: black; 
 
    color: white; 
 
    padding: 5px; 
 
    z-index: 1; 
 
} 
 

 
.tooltipTop{ 
 
    top: 20px; 
 
    display: block; 
 
} 
 

 
.tooltipBottom{ 
 
\t top: -25px; 
 
\t display: block; 
 
} 
 
</style> 
 
<body> 
 
<div class="foo"><a href="#" class="link"> this is a link1</a> 
 
    <div class="tooltip">this is a tooltip1</div> 
 
</div> 
 
<br> 
 
<br> 
 

 
<div class="foo"><a href="#" class="link">this is a link2</a> 
 
    <div class="tooltip">this is a tooltip2</div> 
 
</div> 
 

 
<div class="foo"><a href="#" class="link"> this is a link3</a> 
 
    <div class="tooltip">this is a tooltip3</div> 
 
</div> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<div class="foo"><a href="#" class="link">this is a link4</a> 
 
    <div class="tooltip">this is a tooltip4</div> 
 
</div> 
 
</body> 
 

 
<script> 
 
$(document).ready(function(){ 
 
    $(".foo").click(function(){ 
 
       var bodyheight = $("body").height(); 
 
\t \t var halfbodyheight = bodyheight/2; 
 
\t \t 
 
\t \t var parent = $(this).parent(); 
 
\t \t var position = $(this).position().top; 
 

 
\t \t if(position >= halfbodyheight){ 
 
\t \t \t $(".tooltip").removeClass("tooltipBottom tooltipTop"); 
 
\t \t \t $(this).find('.tooltip').addClass("tooltipBottom"); 
 
\t \t } 
 
\t \t else{ 
 
\t \t \t $(".tooltip").removeClass("tooltipBottom tooltipTop"); 
 
\t \t \t $(this).find('.tooltip').addClass("tooltipTop"); 
 
\t \t } 
 
\t \t 
 
    }); 
 
}); 
 
</script> 
 
</html>

出典

2017-12-29 08:38:46

利用可能なスペースに基づいてツールチップの位置を変更する方法

答えて

関連する問題