jquery tool tip

jquery tool tip

Search for: jquery tool tip

drupal jquery tooltip

Search for: drupal jquery tooltip

a discussion on drupal/jquery tool tips

an interesting html5 version

This may be a good example of how to use canvas.

jtooltips and other options for drupal

how to use dhtml tooltip dynamicdrive

Search for: how to use dhtml tooltip dynamicdrive

here is the dhtml tooltip II module usage


<div id="sat_test" 
  onMouseover="ddrivetip('tool tip text that pops', 300)" 
  onMouseout="hideddrivetip()">
<p>
Some content for the div
</p>
</div>

<div 
  onMouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials', 300)" 
  onMouseout="hideddrivetip()">
<p>Section 1
</div>


<div 
  onMouseover="ddrivetip('hello there. large tool tip',50)" 
  onMouseout="hideddrivetip()">
<p>Section 2
</div>

function stm_hover_setup()
{
    jQuery(document).ready(stm_hover_setup1);
}

function stm_hover_setup1()
{
    //alert('test');
    var elementArray = jQuery(".hover_element");
    //alert(elementArray.length);
    
    for(i=0; i<elementArray.length; i++)
    {
        var element = elementArray[i];
        var href = jQuery(element).attr("href");
        
        jQuery(element).mouseover({href: href}, function(event)
        {
             ddrivetip(event.data.href);
        });
        jQuery(element).mouseout(f2);
    }
}

function f1(event)
{
    ddrivetip(event.data.href,50);
}

function f2()
{
    hideddrivetip();
}

<script>
stm_hover_setup();
</script>

<div class="hover_element" href="satya111">
<p>e1</p>
</div>

<div class="hover_element" href="satya222">
<p>e2</p>
</div>


<div class="hover_element" 
href="satya111 lkj lkj lkj lkj lkj lkj lkj lkj lk ">
<p>This is a long messagee1</p>
</div>

<p class="hover_element" 
href="satya111 lkj lkj lkj lkj lkj lkj lkj lkj lk ">
This is a paragraph
</p>

Needs:

1. attach hover behavior for any html element with a certain css class such as "hoverclass"

2. the html elements may include a, p, div, span etc.

3. The content for the hover may come from a serverside URL hit

4. The content need to be cached on the page if it is already obtained for that page

5. the hover content can be any arbitrary HTML

6. ability to take the hover content from local div on the same page

Desires

1. Ideally we would like the module to be drupal/ajax module that is for 7

2. Second choice native JQuery module irrespective of Drupal

3. The module is clearly documented to learn it in a couple of hours with out lot of experimentation

5. won't spoil global namespaces interms of CSS or Javascript names


writes a global document.write
captures a global mouse move

Perhaps I can rewrite it. But that is for later. Let me see if there is another tool that is better.

jquery plugins home

simpletip jquery plugin

tooltip simpletip jquery

Search for: tooltip simpletip jquery

qtip a successor to simpletip

qtip docs

qtip2

qtip simpletip jquery

Search for: qtip simpletip jquery

jquery tools UI components

qtip jquery ui tools

Search for: qtip jquery ui tools

A stackoverflow list of tooltip tools

A whole slew of tool tips

This is a list of over 21 tooltip tools.

Another huge list of tooltips

hoverintent

Search for: hoverintent

jquery tooltip hoverintent

Search for: jquery tooltip hoverintent

jtooltip uses hoverintent

why use hoverintent for tooltips

hoverintent on stackoverflow

html5 based beautytips at jquery

beautytips browser comaptibility

Search for: beautytips browser comaptibility

hoverintent main doc page

Use this serverside url to test body content from a server side url