You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Dynamic tooltp content using Ajax Created Apr 7, 2010

This thread is solved

Views: 4728     Replies: 14     Last reply Dec 2, 2010  
You must login first before you can use this feature

brucejin

Posts: 2

Registered:
Apr 7, 2010

Dynamic tooltp content using Ajax

Posted: Apr 7, 2010

Can I retrieve tip content on the fly?
Example: I have the tags

<a href="a1.html">  show 1 </a>
<a href="a2.html">  show 2 </a>
<a href="a3.html">  show 3 </a>
<a href="a4.html">  show 4 </a>
When I place cursor on show2, the tooltip would show content of a2.html

Thanks.
Bruce

innerspace

Posts: 15

Registered:
Jun 27, 2009

» Dynamic tooltp content using Ajax

Posted: Apr 9, 2010

Reply to: Dynamic tooltp content using Ajax, from brucejin
Overlay is better suited to that task, it has ajax loading built in.

Have a look at the "loading external content into an overlay" page, get it working onclick as in the demo and the switch the trigger event to a mouseover.

Alternatively if you want to stick with a tooltip then get the tolltip working with some static content and then add a jquery listener to the links mouserover which uses $("#link_id").ajax(...) to load the content

brucejin

Posts: 2

Registered:
Apr 7, 2010

» » Dynamic tooltp content using Ajax

Posted: Apr 9, 2010

Reply to: » Dynamic tooltp content using Ajax, from innerspace
Thanks!
I will take a look of overlay.

shel174

Posts: 2

Registered:
May 19, 2010

» Dynamic tooltp content using Ajax

Posted: May 19, 2010

Reply to: Dynamic tooltp content using Ajax, from brucejin
you can do dynamic ajax-tooltips like this:

html:

<a href="a1.html" class="dynTooltip">show 1 </a>

js:

$(document).ready(function() {
	$(".dynTooltip").tooltip({ 
		effect: 'slide',
		tip:'#theTooltip',
		onBeforeShow: function(){
			theUrl = this.getTrigger().attr("href");
			getAjaxData(theUrl, this.getTip());
		}
	});

	function getAjaxData(theUrl, $tip) {
	    $tip.text('loading...');
	    $.ajax({
	        url:theUrl,
	        success: function(response) {
	            $tip.text(response);
	        }
	    });
	}
});

...quite easy; similar to the "loading external content into an overlay"-tool.
kinda missing link in the tutorials.

garevalo

Posts: 2

Registered:
Jul 9, 2010

show html content

Posted: Jul 9, 2010

Reply to: » Dynamic tooltp content using Ajax, from shel174
hello everybody. this is my first post on these forums :) thanks for this code to ajax tooltip. it works for me.

can you help me set rich content in the tooptip (i.e. images)? this content shows in the tooltip verbose:

string content = "<div class="tooltip">";
content += "<img src="someimage.gif"><br/>store tooltip: " + id;
content += "</div>";

can i set innerHtml or something? thanks

G-

FlyByNight

Posts: 2

Registered:
Aug 20, 2010

Did you find the answer?

Posted: Aug 20, 2010

Reply to: show html content, from garevalo
@Garevalo

Did you find the answer to this? I have just run into the same problem. The solution from Shel174 is excellent but it just needs to parse the ajax content rather than displaying it verbosely.

FBN

ImageMason

Posts: 3

Registered:
Aug 26, 2010

» Did you find the answer?

Posted: Aug 26, 2010

Reply to: Did you find the answer?, from FlyByNight
I would assume that you would just change the getAjaxData function to look like this:

function getAjaxData(theUrl, $tip) {
	    $tip.text('loading...');
	    $.ajax({
	        url:theUrl,
	        success: function(response) {
	            $tip.html(response);
	        }
	    });

garevalo

Posts: 2

Registered:
Jul 9, 2010

» Did you find the answer?

Posted: Aug 26, 2010

Reply to: Did you find the answer?, from FlyByNight
i missed the email i got from this thread from @flybynight

you can put rich content in the tooltip by setting $tip.html(response);

it works; i noticed that when i make my img tag xhtml compliant ( <img src="img.jpg"/> ) the image doesn't show up... when i close the image tag (/>)

image shows up fine with <img src="img.jpg"> (don't close the image tag).

i didn't look into WHY. just watch out for closing the image tag. post here if you got it to work

cheers
G-

redani

Posts: 39

Registered:
Aug 10, 2009

Please help

Posted: Sep 6, 2010

Reply to: » Did you find the answer?, from garevalo
Hi,
I'm trying to make a scrolling login just like in this website (top black nav), i've done the html and javascript things but i'm stuck with the ajax functions and was hoping i can find some help here: here is the pagehttp://moroccan-arts.co.uk/login.php
I'm just wondering what "/account/login" should contain

Thank you so much for your help

rstoeck

Posts: 2

Registered:
Nov 16, 2010

Still unable to get dynamic content, what am I missing?

Posted: Nov 16, 2010

Reply to: » Dynamic tooltp content using Ajax, from shel174
I can't seem to get the dynamic content hover box to work. Being a newbie, I'm sure I'm missing something simple. Can anyone see what's wrong with my code? I have include my complete HTML test:


<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
      $("#demo span[title]").tooltip({effect: 'slide'});

	$(".dynTooltip").tooltip({ 
		effect: 'slide',
		tip:'#theTooltip',
		onBeforeShow: function(){
			theUrl = this.getTrigger().attr("href");
			getAjaxData(theUrl, this.getTip());
		}
	});

	function getAjaxData(theUrl, $tip) {
	    $tip.text('loading...');
	    $.ajax({
	        url:theUrl,
	        success: function(response) {
	            $tip.text(response);
	        }
	    });
	}
});
</script>
</head>
<body>
  <div id="demo" style="position: absolute; left: 100px; top: 100px;">
    <span title="The tooltip text #1">Hover over this text and it works</span>
  </div>
  <div style="position: absolute; left: 200px; top: 150px;">
    <a href="/test.html" class="dynTooltip">Hover over this text and it does not work</a>
  </div>
</body>
</html>

rstoeck

Posts: 2

Registered:
Nov 16, 2010

Making progress

Posted: Nov 16, 2010

Reply to: Still unable to get dynamic content, what am I missing?, from rstoeck
If I add this to the HTML:
<div id="theTooltip"></div>
(not sure why I have to do this)

And change:
$tip.text(response);
to:
$tip.html(response);
then it at least displays the contents of the test.html file.

Next I need the tooltip window to position and size itself automatically based on the contents (size) of the text.html tooltip information. Seems like this has probably been done by someone. Any idea?

Thanks.

Myatu

Posts: 1

Registered:
Nov 28, 2010

» Making progress

Posted: Nov 28, 2010

Reply to: Making progress, from rstoeck
Thanks for the heads up on this one! The documentation seriously needs updating...

xfinx

Posts: 4

Registered:
Sep 23, 2010

» » Dynamic tooltp content using Ajax

Posted: Dec 2, 2010

Reply to: » Dynamic tooltp content using Ajax, from shel174
I agree, this should be added in the documentation. Very nice piece of functionality

arwoPL

Posts: 2

Registered:
Oct 22, 2010

» Dynamic tooltp content using Ajax

Posted: Oct 22, 2010

Reply to: Dynamic tooltp content using Ajax, from brucejin
try this, but its not AJAX :)

onBeforeShow: function(){
	if (this.getTrigger().attr('title') != '') {
		this.getTip().text( this.getTrigger().attr('title') );
	}
}

In other place You change title attribute, example:

$('input[name=XXX]').attr('title','Blablablabla.');

chmj

Posts: 1

Registered:
Nov 22, 2010

still no solution?

Posted: Nov 22, 2010

Reply to: » Dynamic tooltp content using Ajax, from arwoPL
@brucejin, "but its not AJAX" is insulting people's intelligence

•