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

Your preferred username that is used when logging in.

Multiple tooltip on a page and block tags Created Nov 30, 2009

This thread is solved

Views: 6080     Replies: 22     Last reply Nov 19, 2011  
You must login first before you can use this feature

lolka_bolka

Posts: 1

Registered:
Nov 30, 2009

Multiple tooltip on a page and block tags

Posted: Nov 30, 2009

Hello guys!

I'd like to use this tooltip thing with HTML content.
I need several tooltip on a page.

So i have 2 problems.

1) I copied the pure code to localhost from here, and it works:
http://flowplayer.org/tools/demos/tooltip/any-html.htm
(after i rewrote the background image url to absolute).

Ok, now i just placed the trigger into a div or a paragraph.
And tooltip never appear again. It's a problem, because my content come from CMS. Why is it.

The second problem:
I would like more tooltips, but not from title tags, but html content:

I tried to use this code:


<!-- trigger element. a regular workable link -->
<a id="download_now" title="System tooltip for search engines">Download now</a><br><br>
<a id="my_tooltip" title="System tooltip for search engines">Download now</a>

<!-- tooltip element -->
<div class="tooltip">
	1st tooltip
</div>

<div id="mytip" class="tooltip">
	2nd tooltip
</div>




<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready

$(document).ready(function() {
		
	// enable tooltip for "download" element. use the "slide" effect
	$("#download_now").tooltip({ effect: 'slide'}); 
	$("#my_tooltip").tooltip({ effect: 'slide', tip: 'mytip'}); 
});
</script>

Just copied the CSS and renamed, but neither the default tooltip and mytip doesn't show.

How can i use multiplie tooltip on a page?

hups

Posts: 31

Registered:
Jan 18, 2009

» Multiple tooltip on a page and block tags

Posted: Dec 3, 2009

Reply to: Multiple tooltip on a page and block tags, from lolka_bolka
yes that is my interesting when i take moore then 1 i have an error ##

how can i make tooltips with html code inside

http://flowplayer.org/tools/demos/tooltip/any-html.html

this with many other tips on the same page please

GregorH

Posts: 4

Registered:
Sep 17, 2009

Same question

Posted: Dec 7, 2009

Reply to: » Multiple tooltip on a page and block tags, from hups
Same question here :)

I have a menu with 5 buttons and all showing a tooltip with html content (links to subpages). Using html inside the title attribute leads to very bad error in Firefox debugger. I can't see a way nor an example here how to have multiple html containing tooltips on one page.

Could you please give an example how to do this?

Kind regards,
Gregor

stilfx

Posts: 1

Registered:
Jan 13, 2010

Same Multiple HTML Tooltip Error / Bug

Posted: Jan 13, 2010

Reply to: Same question, from GregorH
It seems that once you try to create more than one instance of an HTML tooltip the JS breaks.

MasonShew

Posts: 4

Registered:
Oct 28, 2009

» Same Multiple HTML Tooltip Error / Bug

Posted: Jan 18, 2010

Reply to: Same Multiple HTML Tooltip Error / Bug, from stilfx
See the first post about multiple tooltips. That should fix it for you. http://amazon.flowplayer.org/tools/forum/30/22259

However, I still can't get the tooltip to work if the activating element (text link or image) is inside <p> tags.

kurko

Posts: 4

Registered:
Feb 2, 2010

» Multiple tooltip on a page and block tags

Posted: Feb 2, 2010

Reply to: Multiple tooltip on a page and block tags, from lolka_bolka
The problem is not the multiple tooltips, because I am using multiple ones myself. The problem is about using tooltips inside a paragraph.

I have the same problem here.

tshields

Posts: 1

Registered:
Feb 3, 2010

Solution for HTML tooltips not showing

Posted: Feb 3, 2010

Reply to: » Multiple tooltip on a page and block tags, from kurko
I had this same problem nesting my html tooltips inside of div elements. It seems that the tooltip elements must be direct children of the document's body tag. The trigger elements can be anywhere. I found this post:

http://flowplayer.org/tools/forum/30/31062

It is dealing with a different issue, but the solution worked perfectly. Now my tooltips can be placed anywhere in the document, while the triggers remain exactly where I want them.

Hope that helps someone.

kurko

Posts: 4

Registered:
Feb 2, 2010

» Solution for HTML tooltips not showing

Posted: Feb 3, 2010

Reply to: Solution for HTML tooltips not showing, from tshields
Worked!!!

The solution is: if you have your tooltip inside any paragraph or element that denies the tooltip from showing, you have to use the 'tip' property.

Thank you tshield.

tnoetzel

Posts: 4

Registered:
Feb 17, 2010

» » Solution for HTML tooltips not showing

Posted: Feb 17, 2010

Reply to: » Solution for HTML tooltips not showing, from kurko
I noticed that if you have other images on the page that do not have a name property, that seems to break nearby tooltips. Any idea how to fix this?

portland_code

Posts: 1

Registered:
Mar 11, 2010

still a little lost.

Posted: Mar 11, 2010

Reply to: » Solution for HTML tooltips not showing, from kurko
could you specify what 'tip' property means?
how to use it?

kurko

Posts: 4

Registered:
Feb 2, 2010

» still a little lost.

Posted: Mar 11, 2010

Reply to: still a little lost., from portland_code
I am not with the code right now, so I will speak what I remember.

It is a javascript where you set up the tooltip. There are many possible properties, like offset, effect, etc. One of them is 'tip', in which you specify what element will be the tooltip of the current element.

-> tip: '.mytip'

...means the tooltip is the element of class mytip. Made it? Look at the manual, you will find it.

fabripautasso

Posts: 1

Registered:
Apr 9, 2010

A Solution

Posted: Apr 9, 2010

Reply to: Multiple tooltip on a page and block tags, from lolka_bolka
Hi, my English is not very good but I will try to explain the response. The issue is that the tooltip function looks for the next html tag you want to make a tooltip and takes it as a tooltip, so if you have multiple tooltip for the same page is what should be done as follows:

<!-- trigger element. a regular workable link --> 
<a class="download_now" title="System tooltip for search engines">Download now</a>
<!-- tooltip element --> 
<div class="tooltip"> 
    1st tooltip 
</div>
<br><br> 
<a class="download_now" title="System tooltip for search engines">Download now</a> 
<!-- tooltip element --> 
<div class="tooltip"> 
    2nd tooltip 
</div> 


<script type="text/javascript">
$(document).ready(function() { 
         
	//enable tooltip for "download" element. use the "slide" effect 
    $("a.download_now").each(function(){
		$(this).tooltip({ effect: 'slide', position: 'center right' });  		
});
});
</script>
Thus I resolve the issue, I hope they serve.
Regards

stuttsdc

Posts: 3

Registered:
Dec 8, 2010

» A Solution

Posted: Dec 10, 2010

Reply to: A Solution, from fabripautasso
@fabripautasso. This works fine for Firefox but not IE (I'm testing IE8.) My situation is posted here:http://flowplayer.org/tools/forum/30/54932

If I use the tip: option and add a line like $('.tooltip').insertBefore('#container');
where #container is my outtermost div, the tooltips at least show up in IE BUT they all show the content from the first tooltip and they disappear right away.

I'm stuck.

gnikmada8

Posts: 1

Registered:
Mar 4, 2011

» A Solution

Posted: Mar 4, 2011

Reply to: A Solution, from fabripautasso
The code above is a perfect fix for using multiple html tooltips in one page. Brilliant! THANK YOU!

mspace

Posts: 3

Registered:
Nov 14, 2011

a question on your reply

Posted: Nov 19, 2011

Reply to: A Solution, from fabripautasso
hello

very useful tip!You know how can i display and diferent html code in tooltip..It only brings the text that i give in the title.

Thank you!

mudimo
Find Your Rhythm?

Posts: 284

Registered:
Feb 18, 2011

» a question on your reply

Posted: Nov 19, 2011

Reply to: a question on your reply, from mspace
Have a look @ my site http://www.okondowellbeing.com/ many different tooltips (from 'title' tag, from HTML next to trigger, from HTML somewhere else...)

The site uses all four UI tools - 'Scrollable', 'Tabs', 'Overlay' & 'Tooltip'.

•