CODEWITHSUNDEEP
jquery
alyus
alyus

Reputation: 1007

Expand Tool-Tip to reveal more content

I have an icon with a box above it with the words Hello. When you hover over the icon or the box I want it to expand and reveal text that is hidden (World on Hot Fiya!), much like a read more/read less function. The problem I'm having is, when the box reveals it covers the icon because it reveals down. I'm wondering what I can do so the icon stays put and the box reveals the text going up.

Here's the code I'm using:

<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');
});

Upvotes: 0

Views: 358

Answers (1)

JSess
JSess

Reputation: 648

*Revised to include request from comment *

Here is a plug-in that I just wrote to dynamically set heights (based on their initial/auto heights) -

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

Call the function on DOM ready, like so - 

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

Like it is shown above, the object's params in this function, tooltipSlider, are -

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

Hope that covers it for you.

Upvotes: 2

Related Questions