{"issue":{"created_at":"2011-09-23T15:56:48Z","state":"open","updated_at":"2011-11-18T18:21:22Z","user":{"gravatar_id":"e9612cd342dbddff6640b99db21deee7","id":632025,"url":"https://api.github.com/users/meandmymonkey","login":"meandmymonkey","avatar_url":"https://secure.gravatar.com/avatar/e9612cd342dbddff6640b99db21deee7?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png"},"comments":2,"body":"When a tooltip is assigned to an element inside a container that is itself only visible on hover, touching the tooltip with the mouse will close the whole element (happens quite easily). This is because the tooltip is not attached to the DOM node being hovered over, thereby triggering a mouseout on the element we want to keep open.\r\n\r\nExample:\r\n\r\n```html\r\n<figure>\r\n    <div class=\"tools\">\r\n       <a class=\"tooltip\" title=\"Edit image\" href=\"\">edit</a>\r\n    </div>\r\n   ...\r\n</figure>\r\n```\r\n```css\r\nfigure div.tools { display: none; }\r\nfigure:hover div.tools { display: block; }\r\n```\r\n\r\nThe solution is to be able to attach the toolttip HTML inside an arbitrary container instead of document.body.\r\n\r\nThis is now possible with the new \"container\" option, which takes either a selector string to select a container statically, or a callback function to select the container dynamically, example:\r\n\r\n```javascript\r\n$('a.tooltip').tipsy({container: function(e) {return e.parent().parent();}});\r\n```\r\n\r\nNote: this is similar in intention to https://github.com/jaz303/tipsy/pull/47, but uses a more flexible approach IMHO.\r\n\r\n","assignee":null,"id":1724539,"number":79,"labels":[],"pull_request":{"patch_url":"https://github.com/jaz303/tipsy/pull/79.patch","html_url":"https://github.com/jaz303/tipsy/pull/79","diff_url":"https://github.com/jaz303/tipsy/pull/79.diff"},"title":"Added ability to select tooltip container via callback or selector option","closed_at":null,"html_url":"https://github.com/jaz303/tipsy/issues/79","milestone":null,"url":"https://api.github.com/repos/jaz303/tipsy/issues/79"},"action":"created","comment":{"created_at":"2011-11-18T18:21:22Z","updated_at":"2011-11-18T18:21:22Z","user":{"gravatar_id":"036a1b88dafaab8ffd73a8b0a74b5b38","id":319282,"url":"https://api.github.com/users/ef4","login":"ef4","avatar_url":"https://secure.gravatar.com/avatar/036a1b88dafaab8ffd73a8b0a74b5b38?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png"},"body":"Thanks, I was about to write this when I found yours. I needed it to make tooltips scroll correctly within their container.\r\n\r\nOne potential gotcha that's worth documenting: the container must be a positioned element. If it's not your tooltips end up in the wrong place.","id":2792430,"url":"https://api.github.com/repos/jaz303/tipsy/issues/comments/2792430"}}