CSSツールチップがページ/ウィンドウから出ないようにする

Question

リンクをspanすると、ツールチップとしてhoverをロードするCSSのみのツールチップがあります。ただし、これはCSSで配置されますが、リンクがページの上部または側面の近くにある場合、ツールチップはページの側面/上部から外れます。

Cssでこの変更を行う方法はありますか、JSに頼る必要がありますか？私はjQueryで何かを組み合わせようと試み始めましたが、可能であればCSSを使用したいと思います。

https://jsfiddle.net/gtoprh21/12/ のJSフィドル

スニペット：

$( ".ktooltip" )
.mouseover(function(e) {
   var mousex = e.pageX + 20; //Get X coordinates
   var mousey = e.pageY + 10; //Get Y coordinates
   if((mousey+100)>$(window).height())
   {

    $('.tooltip')
    .css({ top: mousey-100 ,left: mousex })

   }
   else if((mousex+200)>$(window).width())
   {
      $('.tooltip')
    .css({ top: mousey ,left: mousex-200})

   }
   else
    {
   $('.tooltip')
    .css({ top: mousey, left: mousex })

    }
})

.ref, .refs {
  position:relative;
}
/*added a text indent to overide indent styles further down*/
.ktooltip {
    display: inline-block;
    text-indent:0em;
}

.ref .ktooltiptext, .refs .ktooltiptext {
  visibility:hidden;
  width: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 5px 5px;
  top: -40px;
  left: 10px;
  border:2px solid grey;
  line-height: normal;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.ref:hover .ktooltiptext, .refs:hover .ktooltiptext {
    visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
 <span id="edtxt.trans1" class="tei l">My hope is in a bishop,
 <!--link to a reference -->
   <sup class="ref expl">
     <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>
       <!-- lhe reference in a tooltip -->
       <span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>
   </sup>
  </span><br>
  <span id="trans2" class="tei l">and in almighty God and his never-ending miracles.</span><br>
  <span id="trans3" class="tei l">Generous Saint Nicholas holds an office,</span><br>
  <span id="trans4" class="tei l">there is a gold symbol in his sign.
    <!-- likn to ref -->
    <sup class="ref expl">
      <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">2</a>
        <!-- the tooltip -->
        <span class="ktooltiptext"> One of <span style="">Nicholas’s</span> symbols was three <sup>bags</sup> of gold <span style="font-variant: small-caps;">which</span> were the <span style="color: red;">dowry</span> he provided <span style="color: blue;">for</span> three <span style="color: green;">girls</span>
        </span>
    </sup>
   </span><br>
   </p>

Answer 1

残念ながら、ツールチップを適切な位置に保ちたい場合は、CSSだけを使用することはできません。

スクリプトソリューション

ただし、既にいくつかのスクリプトを使用しているので、このソリューションをお勧めします。

• _position: absolute_を使用して_.ktooltiptext_を_.ref_に合わせて配置します。
• .getBoundingClientRect()メソッドを使用して、ツールチップの位置とサイズを簡単に取得し、
• window以外の場合は、何らかの修正を適用します。
• CSSにもいくつかの変更を加えました。

ネイティブJavaScriptのみのスニペット（jQueryを回避すると、ドキュメントは軽くなります。）

_var ktooltips = document.querySelectorAll(".ktooltip");
ktooltips.forEach(function(ktooltip, index){                // For each ktooltip
  ktooltip.addEventListener("mouseover", position_tooltip); // On hover, launch the function below
})

function position_tooltip(){
  // Get .ktooltiptext sibling
  var tooltip = this.parentNode.querySelector(".ktooltiptext");
  
  // Get calculated ktooltip coordinates and size
  var ktooltip_rect = this.getBoundingClientRect();

  var tipX = ktooltip_rect.width + 5; // 5px on the right of the ktooltip
  var tipY = -40;                     // 40px on the top of the ktooltip
  // Position tooltip
  tooltip.style.top = tipY + 'px';
  tooltip.style.left = tipX + 'px';

  // Get calculated tooltip coordinates and size
  var tooltip_rect = tooltip.getBoundingClientRect();
  // Corrections if out of window
  if ((tooltip_rect.x + tooltip_rect.width) > window.innerWidth) // Out on the right
    tipX = -tooltip_rect.width - 5;  // Simulate a "right: tipX" position
  if (tooltip_rect.y < 0)            // Out on the top
    tipY = tipY - tooltip_rect.y;    // Align on the top

  // Apply corrected position
  tooltip.style.top = tipY + 'px';
  tooltip.style.left = tipX + 'px';
}_

_.ref,
.refs {
  position: relative;
}

.ktooltip {
  display: inline-block;
  text-indent: 0em;
}

.ref .ktooltiptext,
.refs .ktooltiptext {
  visibility: hidden;
  width: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 5px;       /* TAKIT: Changed here */
  top: -999px;        /* TAKIT: Changed here */
  left: -999px;       /* TAKIT: Changed here */
  border: 2px solid grey;
  line-height: normal;
  position: absolute; /* TAKIT: Changed here */
  z-index: 1;
}

.ref:hover .ktooltiptext,
.refs:hover .ktooltiptext {
  visibility: visible;
}_

_<p>
  <span id="edtxt.trans1" class="tei l">My hope is in a bishop,
 <!--link to a reference -->
   <sup class="ref expl">
     <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>
       <!-- the reference in a tooltip -->
       <span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>
  </sup>
  </span><br>
  <span id="trans2" class="tei l">and in almighty God and his never-ending miracles.</span><br>
  <span id="trans3" class="tei l">Generous Saint Nicholas holds an office,</span><br>
  <span id="trans4" class="tei l">there is a gold symbol in his sign.
    <!-- link to ref -->
    <sup class="ref expl">
      <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">20</a>
        <!-- the tooltip -->
        <span class="ktooltiptext"> One of <span style="">Nicholas’s</span> symbols was three <sup>bags</sup> of gold <span style="font-variant: small-caps;">which</span> were the <span style="color: red;">dowry</span> he provided <span style="color: blue;">for</span>  three <span style="color: green;">girls</span>
  </span>
  </sup>
  </span><br>
</p>_

jQueryを使用したスニペット

_$(".ktooltip").mouseover(function(e) {
  var tooltip = $(this).siblings('.ktooltiptext'); // Get tooltip element (ktooltiptext)
  var tipX = $(this).outerWidth() + 5;             // 5px on the right of the ktooltip
  var tipY = -40;                                  // 40px on the top of the ktooltip
  tooltip.css({ top: tipY, left: tipX });          // Position tooltip

  // Get calculated tooltip coordinates and size
  var tooltip_rect = tooltip[0].getBoundingClientRect();
  // Corrections if out of window
  if ((tooltip_rect.x + tooltip_rect.width) > $(window).width()) // Out on the right
    tipX = -tooltip_rect.width - 5; // Simulate a "right: tipX" position
  if (tooltip_rect.y < 0)            // Out on the top
    tipY = tipY - tooltip_rect.y;    // Align on the top

  // Apply corrected position
  tooltip.css({ top: tipY, left: tipX }); 
});_

_.ref,
.refs {
  position: relative;
}

.ktooltip {
  display: inline-block;
  text-indent: 0em;
}

.ref .ktooltiptext,
.refs .ktooltiptext {
  visibility: hidden;
  width: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 5px;       /* TAKIT: Changed here */
  top: -999px;        /* TAKIT: Changed here */
  left: -999px;       /* TAKIT: Changed here */
  border: 2px solid grey;
  line-height: normal;
  position: absolute; /* TAKIT: Changed here */
  z-index: 1;
}

.ref:hover .ktooltiptext,
.refs:hover .ktooltiptext {
  visibility: visible;
}_

_<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
  <span id="edtxt.trans1" class="tei l">My hope is in a bishop,
 <!--link to a reference -->
   <sup class="ref expl">
     <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>
       <!-- the reference in a tooltip -->
       <span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>
  </sup>
  </span><br>
  <span id="trans2" class="tei l">and in almighty God and his never-ending miracles.</span><br>
  <span id="trans3" class="tei l">Generous Saint Nicholas holds an office,</span><br>
  <span id="trans4" class="tei l">there is a gold symbol in his sign.
    <!-- link to ref -->
    <sup class="ref expl">
      <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">20</a>
        <!-- the tooltip -->
        <span class="ktooltiptext"> One of <span style="">Nicholas’s</span> symbols was three <sup>bags</sup> of gold <span style="font-variant: small-caps;">which</span> were the <span style="color: red;">dowry</span> he provided <span style="color: blue;">for</span>  three <span style="color: green;">girls</span>
  </span>
  </sup>
  </span><br>
</p>_

上記のスニペットのいずれかを使用すると、ウィンドウを操作して、ポップアップが右側の外に出ないことを確認できます！同様に上に出てはいけません。

---

⋅⋅⋅

CSSのみの提案

これで、ツールチップの位置をあまり気にしないのであれば、HTMLを変更しなかったこのソリューションを使用できます。

• span要素で_position: relative;_を使用して参照として使用し、
• _position: absolute_で_.ktooltiptext_を使用し、
• topとleftを使用して、希望どおりに_.ktooltiptext_を配置します。

このソリューションを使用すると、ツールチップはスタイルを維持しますが、左側のspan要素の下に配置されるため、ツールチップは右または上に出てはなりません。

_p span { /* TAKIT: Changed here */
  position: relative;
}

.ktooltip {
  display: inline-block;
  text-indent: 0em;
}

.ref .ktooltiptext,
.refs .ktooltiptext {
  visibility: hidden;
  width: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 5px;       /* TAKIT: Simplified here */     
  border: 2px solid grey;
  line-height: normal;
  position: absolute; /* TAKIT: Changed */
  top: 20px;          /* TAKIT: Changed */
  left: 0;            /* TAKIT: Added to always align tooltip on the left of the span */ 
  z-index: 1;
}

.ref:hover .ktooltiptext,
.refs:hover .ktooltiptext {
  visibility: visible;
}_

_<p>
  <span id="edtxt.trans1" class="tei l">My hope is in a bishop,
 <!--link to a reference -->
   <sup class="ref expl">
     <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>
       <!-- the reference in a tooltip -->
       <span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>
  </sup>
  </span><br>
  <span id="trans2" class="tei l">and in almighty God and his never-ending miracles.</span><br>
  <span id="trans3" class="tei l">Generous Saint Nicholas holds an office,</span><br>
  <span id="trans4" class="tei l">there is a gold symbol in his sign.
    <!-- link to ref -->
    <sup class="ref expl">
      <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">20</a>
        <!-- the tooltip -->
        <span class="ktooltiptext"> One of <span style="">Nicholas’s</span> symbols was three <sup>bags</sup> of gold <span style="font-variant: small-caps;">which</span> were the <span style="color: red;">dowry</span> he provided <span style="color: blue;">for</span>  three <span style="color: green;">girls</span>
  </span>
  </sup>
  </span><br>
</p>_

Answer 2

これは、CSSのみでJSなしで試すことができます。最もエレガントなタイプのツールチップではありませんが、決して失敗することはなく、決してあきらめません:)

    .ktooltip {
        display: inline-block;
        text-indent:0em;
    }
    
    .ktooltiptext, .ktooltiptext {
    display: none;
        width: calc(100vw - 35px);
        background: #fff;
        border-radius: 6px;
        padding: 5px 5px;
        left: 10px;
        border: 2px solid grey;
        line-height: normal;
        text-decoration: none;
        position: absolute;
        z-index: 1;
    
    }
    
    p {display:inline-block}
    
    .ktooltip:hover + span {
        display: block;
    }

    <p>
     <span id="edtxt.trans1" class="tei l">My hope is in a bishop,
     <!--link to a reference -->
    <div style="display:inline-block">
      <a href="#edtxt-explnote1" id="reference-to-edtxt-explnote1" class="ktooltip">1</a>
         
    <span class="ktooltiptext">According to tradition <span style="name">Nicholas</span> was bishop of Myra in Lycia (south-west Turkey today).</span>
    </div>
    
      </span><br>
      <span id="trans2" class="tei l">and in almighty God and his never-ending miracles.    </span><br>
      <span id="trans3" class="tei l">Generous Saint Nicholas holds an office,</span><br>
      <span id="trans4" class="tei l">there is a gold symbol in his sign.
        <!-- likn to ref -->
          <a href="#edtxt-explnote2" id="reference-to-edtxt-explnote2" class="ktooltip">2</a>
            <span class="ktooltiptext" onclick="return false;"> One of <span style="">Nicholas’s</span> symbols was three <sup>bags</sup> of gold <span style="font-variant: small-caps;">which</span> were the <span style="color: red;">dowry</span> he provided <span style="color: blue;">for</span> three <span style="color: green;">girls</span>
            </span>
       </span><br>
       </p>

https://jsfiddle.net/gtoprh21/72/

Answer 3

すべてを再コーディングする必要がありますが、次のようなものでそれを達成できます：

$(".ktooltip").on('mouseover', function(e) {
    var tooltip = $('.ktooltiptext'),
        wt = $(window).scrollTop(), //window top pos
        ww = $(window).outerWidth(), //window width
        tt = tooltip.offset().top, //Tooltip top pos
        tl = tooltip.offset().left, //Tooltip left pos
        tw = tooltip.outerWidth(); //Tooltip Width

    tooltip.css({ 'left': '10px', 'right': 'auto', 'top': '-40px' });

    if(tt < wt) tooltip.css('top', 0);
    if((tl + tw) > ww) tooltip.css({ 'left': 'auto', 'right': 0 });
})

Answer 4

このcss ndをコピーしてクラスに置き換えてください

.ref .ktooltiptext、.refs .ktooltiptext

.ref .ktooltiptext, .refs .ktooltiptext {
  visibility:hidden;
  width: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 5px 5px;
  top: -15px;
  left: 10px;
  border:2px solid grey;
  line-height: normal;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

Answer 5

オプション1）titleグローバル属性の使用

title-要素に関する追加情報を指定します（ツールヒントとして表示されます）

ドキュメント： titleグローバル属性 title属性の使用は、次の場合に非常に問題があります。

• タッチ専用デバイスを使用している人
• キーボードでナビゲートする人々
• スクリーンリーダーや拡大鏡などの支援技術を使用してナビゲートする人々
• 細かい運動制御障害を経験している人々
• 認知に不安がある人。これは主に、一貫性のないブラウザサポートが原因であり、ブラウザでレンダリングされたページの支援技術の解析によって導入される追加の複雑さによって悪化します。

span {border-bottom: 1px dashed pink}

<span title="According to tradition Nicholas was bishop of Myra in Lycia (south-west Turkey today).">
Mouse over this paragraph, to display the title attribute as a tooltip.
</span>

オプション2）テキストとツールチップテキストのサイズが固定されている場合：4つのCSSクラスを使用して、トリガー要素を参照するツールチップを配置できます。何かのようなもの：

.tooltip-top {top: -3em}
.tooltip-bottom {top: 0}
.tooltip-left {left: -3em}
.tooltip-right {right: 0}