How to show a tip on a proper position near the el

问题:

I have the following div on the page:

<div id="tip">
  Tip text here...
</div>

And the following one:

 <div class="element">
   Element text here...
 </div>

Also following js-code:

$(document).ready(function() {
    $('.element').hover(function() {
        $('#tip').css('top', $('.element').position().top);
        $('#tip').css('left', $('.element').position().left);
        $('#tip').fadeIn();
    }, function() {
        $('#tip').fadeOut();
    });
});

It shows tip on left top corner of the page. How do I fix this code to show tip on the same position as of the element? (I can't place tip and element near each other on the code.)

Thanks a lot for the help!

回答1:

.position is relative to the parent, try .offset, who is relative to the document

回答2:

Giving title to Div tag show a tool tip... try like below....

<div title="ToolTip for Hello World">

Hello World

</div>

See this fiddle : http://jsfiddle.net/TPyKS/5/

回答3:

That's how I would do a tooltip :

Html

<div class="tip" title="Title here">
   Element text here...
 </div>

jQuery

$(document).ready(function() {
    $('.tip').each(function(i, e) {
       var $this = $(e),

           originalTitle = $this.attr('title'),

       //Keep the title
           $title = $('<p class="tooltip" />').html(originalTitle);

       //Remove initial one
       $this.attr('title', '');

       $title.appendTo($this);

    });
    $('.tip').hover(function() {
        $(this).find('.tooltip').fadeIn();
    }, function() {
        $(this).find('.tooltip').fadeOut();
    });
});

Css

.tip {
    position:relative;
}

.tooltip {
    position:absolute;
    display:none;
}

Just set the position of your tooltip with css with this. The title attribute permits to the users with disabled javascript to see them too.

See fiddle.

回答4:

Try this:

HTML

<div class="element">
   Element text here...
 </div>
<div id="tip">
  Tip text here...
</div>

CSS

#tip{
    position: absolute;
    display: none;
    background: #ccc;
    padding: 10px;
}
.element:hover + #tip{
    display: block;
}
div{
    float: left;
}

DEMO: http://jsfiddle.net/enve/TPyKS/10/

回答5:

You can try using following function to help you determine absolute coordinates of the domElement. left and top parameters can be supplied to get position with relative shift from left-top corner of the element.

var findAbsolutePosition = function(domElement, left, top) {
    if (!parseInt(left)) {
        left = 0;
    } else {
        left = parseInt(left);
    }
    if (!parseInt(top)) {
        top = 0;
    } else {
        top = parseInt(top);
    }

    var box = domElement.getBoundingClientRect();
    var body = document.body;
    var docElem = document.documentElement;
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft ||0;

    var position = {};
    position.y = box.top +  scrollTop - clientTop + top*Settings.get('scale'); 
    position.x = box.left + scrollLeft - clientLeft + left*Settings.get('scale');
    position.width=box.width;
    position.height=box.height;

    return position;
}

Other way is to dynamically insert tip element to DOM near the element that need tip. Which method to use is up to you