jquery - 展开工具提示以显示更多内容

Question

我有一个图标，上面有一个框，上面写着你好。当您将鼠标悬停在图标或框上时，我希望它展开并显示隐藏的文本（World on Hot Fiya！），就像阅读更多/阅读更少功能一样。我遇到的问题是，当框显示它时，它会覆盖图标，因为它会向下显示。我想知道我能做些什么，以便图标保持不变，并且框显示文本上升。

这是我正在使用的代码：

<div class="icon"><img src="icon.jpg"></div>
<div class="box">
  Hello
  <p>World on Hot Fiya</p>
</div>

$('.box p').addClass('is-hidden');

$('.box').hover(function() {
  $('.box p').removeClass('is-hidden').addClass('block');
}, function() {
  $('.box p').removeClass('block').addClass('is-hidden');
});

Answer 1

*修改为包括评论请求*

这是我刚刚编写的一个插件，用于动态设置高度（基于它们的初始/自动高度） -

http://jsfiddle.net/jmsessink/CTvMe/8/

在准备好的 DOM 上调用函数，就像这样 -

$(function () {
    $('.box').tooltipSlider({tooltip:'.tool-tip', titleHeight:'20px'});
});

---

如上所示，此函数中的对象参数 tooltipSlider 是 -

.tooltipSlider(
    {
        tooltip: '(class that you want to be the tooltip)',
        titleHeight: '(initial height of tooltip above icon (non-hovered))px'
    }
);

希望能为你涵盖它。