goldfire / minitip Goto Github PK

make the wrap's width fixed and title can auto fit

may be possible to use ajax without any code changes - I haven't tested this yet, but something like this might work:
(pseudocode)

show: function(content){
if (content.html() == "") {
$.get("/ajax.html", function(html){
content.html(html);
});
}
}

I need to generate my tooltip content dynamically based on some attributes of my target element. Here is my code:

<div class="tooltip" data-image="true" data-content="test 123">Hover over me</div>

<script>
$(function(){
  $('.tooltip').miniTip({
    content: function(){
      console.log(this);
      console.log($(this));
    }
  });
});
</script>

Is it possible to somehow get the jQuery object of the div being hovered over in my content callback?

i'd like to show tooltips and hide them programatically. would be awesome if it didn't need an event, and i could give it a delay until it should be hidden.

This is a great plugin. I have been working on making sure all my fellow developers know of it and are using it.

I am working on building a site that will be viewed on tablets only. Thankfully there is the click option for making the tip appear and I know it will disappear when you click another link that is connected to a tip or click on the original link. What I am wondering is, would it be possible to add an option to close the tip by clicking on it in addition to all the other ways currently available? The design I am working with shows an "X" on each tool tip and they are really looking forward to being able to click that to close it, but clicking anywhere on the tool top would be fine.

Cheers,
Matt

Getting errors on the minified file.

Chrome:
Uncaught Syntax Error: Unexpected token!

Firefox:
Timestamp: 7/16/2012 2:57:12 PM
Error: missing } after property list
Source File: https://ecwebd01.llbean.com/js/jquery.miniTip.min.js
Line: 15, Column: 183

I got better results with Closure Compiler, in comparison to uglify.js

See fiddle: http://jsfiddle.net/jasonday/LYXx4/

stemOff moves the stem, but should also move the main tooltip content left minus stemOff value to recenter to the element.

Hi James,

I am trying to set a function using the show option that would automatically close the tool tip that was just opened after 3 seconds. Unfortunately, I am not having any luck. Here are the trials I made. Do you have any suggestions?

$('#image-01').miniTip({
    anchor: 'e',
    content: 'CONTENT',
    event: 'click',
    offset: -300,
    show: function () {
        $('#image-01').delay(3000).miniTip({hide: true})
    }
});

$('#image-01').miniTip({
    anchor: 'e',
    content: 'CONTENT',
    event: 'click',
    offset: -300,
    show: function () {
        function hideTip() {
            $('#image-01').miniTip({doHide: true});
        };
        setTimeout(hideTip(), 3000);
    }
});

Thank you,
Matt

edge of viewport is close to the left - arrow falls off side .

maybe a minimum offset would fix? or if the plugin would switch to east/west at that point?

First off, this is a fantastic plugin...lightweight and straight to the point.

I am trying to use it with dynamic content and am having an issue with re-initializing it. I have some color swatches that are re-drawn whenever one of them is clicked (this is due to server-side functions to check availability of the chosen swatch). On initial load, the tool tips show as expected. However, after the re-draw, the tool tip function no longer is associated with the swatches. Can a reload or refresh option be added into the plugin so it can deal with dynamic or AJAX driven content?

When I try and use an image map to fire a tool tip, I am getting the following error: "num is not defined in jquery.miniTip.js line 181". I have tried using both circle and rectangular areas.

Cheers,

Matt

I need to be able to remove already bound miniTips.

Is there any way to dynamically destroy a miniTip binding? Similar to the way in which you would use .unbind and .die with .bind and .live respectively.

If new elements are inserted into the DOM, they don't get the miniTip binding as they should.

context

several same-sized divs with float:left.
each div have a minitooltip associated with aHide set false.

step to reproduce

1. when the cursor is over a div a tooltip appears.
2. move the cursor from the div to the tooltip

explanation

when the cursor move from the div to the tooltip, the cursor may raise an event on visible part of the div under the tooltip.

| tooltip |
+---/----+
.....v....... <- this space is the danger zone because this div's tooltip raise randomly an hover event when the cursor is detected on it.
+---------+
| div |

demonstration code

<style>body p{float:left;border:1px solid #000;width:200px;height:200px;margin:0}</style>
<p></p><p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p><p></p>
<script>
$(document).ready(function(){$("p").each(function(i,e){var t = $(this);t.miniTip({aHide:false,event:'hover',content:'['+i+']'});
});});</script>