如何在 span 前面添加一个不可见的锚点？

Question

约束条件：支持IE7。

描述：

我的网页中有很多。当用户单击 .sentence.

时，我想在 .sentence 的开头添加工具提示
var $tooltip = $('').html( $('<input type="button" class="tooltip" id="sentence-tooltip">')); $('.sentence.select').prepend($tooltip); $tooltip.hide().fadeIn(200);

结构将变为：

  <input type="button" class="tooltip" id="sentence-tooltip">  text text 

但是这个方法有一个问题：当.sentence开始在浏览器的左边框时，span#tooltip-anchor出现在浏览器的右边框，因为浏览器打破了[=之间的线21=] 和 .sentence.select。我该如何解决这个问题？

#tooltip-anchor只是我想锚定.sentence开头的一个想法。你能帮忙想出另一个解决方案吗？

预计：

工具提示浮动在句子开头的顶部。

工具提示功能不应更改句子的布局。

[tooltip] This is a sentence. This is another sentence.

代码： JSFiddle here

$.fn.extend({ deselectSentence: function() { if ($(this).hasClass('select')) { $('#sentence-tooltip').fadeOut(200, function() { $(this).parent().remove(); }); $(this).removeClass('select'); } }, selectSentence: function() { $('.sentence.refresh.select').each(function() { $(this).deselectSentence(); }); var $tooltip = $('').html( $('<input type="button" class="tooltip" id="sentence-tooltip">')); $(this).prepend($tooltip); $tooltip.hide().fadeIn(200); $(this).addClass('select'); } }); $('.sentence.refresh').click(function() { if ($(this).hasClass('select')) { $(this).deselectSentence(); } else { $(this).selectSentence(); } });

.sentence.refresh { border: solid 1px transparent; cursor: pointer; line-height: 20px; font-size: 20px; } .sentence.refresh:hover { background-color: #cde5fe; transition: .2s ease-in-out; } .sentence.refresh.select { background-color: #96cbff; border-color: #bbb; } .tooltip { position: absolute; z-index: 9999; border: solid 1px #bbb; width: 30px; height: 30px; display: inline-block; *display: inline; *zoom: 1; background: url(Images/search.png) no-repeat; background-color: red; top: -30px; } .tooltip:hover { border-color: #96cbff; background-color: #96cbff; } #tooltip-anchor { position: relative; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div style="width:200px"> loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text. loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text.loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text. loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text. loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text.short text. short text. short text. short text.short text. short text. short text. short text. short text. short text.short text. short text. short text. short text. short text. short text.short text. short text. short text. short text. short text. short text.short text. short text. short text. short text. short text. short text.short text. short text. </body>

Answer 1

我删除了 css position 内容，并将工具提示更改为在单击时显示，只是想了解一下它的外观。这似乎没有您提到的问题。

它肯定可以清理干净，但它为您提供了一个起点，我相信它可以解决您当前的问题。

$(document).ready(function() {
  
  var $tooltip = $('<span id="tooltip-anchor"></span>').html(
                 $('<input type="button" class="tooltip" id="sentence-tooltip" value="?" />'));
  $tooltip.hide();
  $('.sentence').prepend($tooltip).on('click', function(){
    $(this).find('#tooltip-anchor').fadeIn(200);
  });
});

.tooltip {
        /*position: absolute;*/
        z-index: 9999;
        border: solid 1px #bbb;
        width: 30px;
        height: 30px;
        display: inline-block;
        *display: inline; *zoom: 1; /* IE7 inline-block fix */
        background: url(Images/search.png) no-repeat;
        background-color: #fff;
        position:absolute;
        top:-30px;
    }

#tooltip-anchor{
  position:relative;
    
}

<!-- some line breaks so the tooltip will have room to display. -->
sample text-- don't click here. This just shows that the elements above the tooltip don't shift.
<br /><br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="sentence">
  click this text to see a tool tip.
</span>

Answer 2

我发现 IE7 有问题。我使用添加内联样式 "zoom: 1; display: inline" 的 jQuery 插入 .tooltip-anchor。 正是 "zoom: 1" 导致 .tooltip-anchor 和尾随文本之间可能出现换行。

将css修改如下：

.tooltip-anchor {
    position: relative;
    *zoom: 0 !important; /* <--- Added */
}

而且效果很好。

如何在 span 前面添加一个不可见的锚点？

How to add a invisible anchor in the front of `span`?

html

css

anchor

jquery