Предотвратить вывод подсказки CSS из страницы/окна

Ответ 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="">Nicholass</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>

Ответ 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="">Nicholass</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>

Ответ 3

просто скопируйте этот 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;
}

Ответ 4

хотя все это нужно перекодировать, но вы можете добиться чего-то вроде этого:

$(".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 });
})

Ответ 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>