javascript - 防止 CSS 工具提示超出页面/窗口

Question

我有一个只有 CSS 的工具提示，当您 hover 链接时，它会加载一个 span 作为工具提示。然而，这是使用 CSS 定位的，但如果链接靠近页面顶部或侧面，则工具提示会离开页面侧面/顶部。

有没有办法用 css 来做这个改变，还是我必须依赖 JS？ 我已经开始尝试将一些东西与 jQuery 放在一起，但如果可能的话我宁愿使用 CSS。

JS fiddle https://jsfiddle.net/gtoprh21/12/

片段:

$( ".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()方法轻松获取工具提示的位置和大小，
• 如果在窗口之外应用一些修正，
• 还对 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;作为引用，
• 在.ktooltiptext上使用position: absolute，
• 使用 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>