Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
nested lists and qtip for the last mouseenter element ???
4th October, 09:24
Post: #1
nested lists and qtip for the last mouseenter element ???
Hello everyone!

First of all, thanks for these great jquery plugin.
Now, there is something annoying when I try to display a qtip with only the last mouseenter "li" element.

@see With $('ul.categories li') jquery selector

@see With qTip option show: { solo: true; }

But I try to display only the list item qtip with id = 14 - because the computer's mouse is hover these one.
The images links provided upper will give you the ability to understand my problem.

Is there a simple way to do it ??? Thanks for any tips :)

HTML Structure:
JS Code
<ol class="categories"><li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_1" style="border-color: gray;">
	<div style="font-weight: normal;">
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/1">Bienvenue</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_1" name="inputCategorie_1" value="1">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_1" name="inputCategorieIndex_1" value="2">
	</div>
</li>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_2" style="border-color: gray;">
	<div style="font-weight: normal;">
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/2">Général</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_2" name="inputCategorie_2" value="2">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_2" name="inputCategorieIndex_2" value="3">
	</div>
<ol>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_4" style="border-color: gray;">
	<div style="font-weight: normal;">
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/4">Réagissez à nos actualités</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_4" name="inputCategorie_4" value="4">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_4" name="inputCategorieIndex_4" value="4">
	</div>
</li>
</ol>
</li>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_3" style="border-color: gray;">
	<div style="font-weight: normal;">
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/3">Compétitions</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_3" name="inputCategorie_3" value="3">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_3" name="inputCategorieIndex_3" value="5">
	</div>
<ol>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_11" style="border-color: gray;">
	<div style="font-weight: normal;">
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/11">Compétitions, Tournois Internes</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_11" name="inputCategorie_11" value="11">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_11" name="inputCategorieIndex_11" value="6">
	</div>
</li>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_12" style="border-color: gray;">
	<div style="font-weight: normal;">
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/12">Compétitions en équipe</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_12" name="inputCategorie_12" value="12">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_12" name="inputCategorieIndex_12" value="7">
	</div>
<ol>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_13" style="border-color: gray;">
	<div style="font-weight: normal;">
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/13">Compétitions en équipe, Régionale 1</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_13" name="inputCategorie_13" value="13">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_13" name="inputCategorieIndex_13" value="8">
	</div>
</li>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_14" style="border-color: gray;">
	<div style="font-weight: normal;">
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/14">Compétitions en équipe, Départementale 2</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_14" name="inputCategorie_14" value="14">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_14" name="inputCategorieIndex_14" value="9">
	</div>
</li>
</ol>
</li>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_15">
	<div>
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/15">Compétitions, Tournois Rapides</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_15" name="inputCategorie_15" value="15">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_15" name="inputCategorieIndex_15" value="10">
	</div>
</li>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_16">
	<div>
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/16">Compétitions, Tournois FFE et FIDE</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_16" name="inputCategorie_16" value="16">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_16" name="inputCategorieIndex_16" value="11">
	</div>
</li>
</ol>
</li>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_5">
	<div>
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/5">Cours d'échecs</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_5" name="inputCategorie_5" value="5">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_5" name="inputCategorieIndex_5" value="12">
	</div>
<ol>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_6">
	<div>
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/6">Cours d'échecs à destination des Adultes</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_6" name="inputCategorie_6" value="6">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_6" name="inputCategorieIndex_6" value="13">
	</div>
<ol>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_10">
	<div>
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/10">Cours d'échecs à destination des Adultes, Initiation</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_10" name="inputCategorie_10" value="10">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_10" name="inputCategorieIndex_10" value="14">
	</div>
</li>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_17">
	<div>
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/17">Cours d'échecs à destination des Adultes, Perfectionnement</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_17" name="inputCategorie_17" value="17">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_17" name="inputCategorieIndex_17" value="15">
	</div>
</li>
</ol>
</li>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_7">
	<div>
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/7">Cours d'échecs à destination des Jeunes</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_7" name="inputCategorie_7" value="7">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_7" name="inputCategorieIndex_7" value="16">
	</div>
<ol>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_8">
	<div>
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/8">Cours d'échecs à destination des Jeunes, Initiation</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_8" name="inputCategorie_8" value="8">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_8" name="inputCategorieIndex_8" value="17">
	</div>
</li>
<li class="borderGray padding5 marginBottom5 ui-corner-all" id="idCategorie_9">
	<div>
		<img width="16" height="16" class="handle" src="/images/crystal_project/32x32/apps/msn.png">
		<span class="marginLeft5"><a title="" href="/membre/forum/categories/9">Cours d'échecs à destination des Jeunes, Perfectionnement</a></span>
		<input type="hidden" class="inputCategorie" id="inputCategorieId_9" name="inputCategorie_9" value="9">
		<input type="hidden" class="inputCategorieIndex" id="inputCategorieIndexId_9" name="inputCategorieIndex_9" value="18">
	</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>


JS Code not provided, nothing special except the jquery selectors given with the links.
Using a $('ul.categories li').each(function(){ ... }); parsing to iterate through all li elements inside ul.categories element.

Development context:
> jQuery 1.4.2
> jQuery UI 1.8.2
> qTip-1.0.0-rc3

Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  [Solved] Dynamic Content From Page Element frogg3862 2 89 3rd May 17:12
Last Post: frogg3862
  calling .html using the element id matthearn 0 308 24th February 15:08
Last Post: matthearn
  [Solved] Attach QTIP to any element with attribute "tooltip" slhilbert 7 402 15th February 14:44
Last Post: slhilbert
  [Solved] How to append QTip to some other element instead of document body prateekbansal 2 496 11th January 07:01
Last Post: prateekbansal
  [Solved] QTip content from existing div element on page? dcash 4 2,519 8th December 18:29
Last Post: Craig
  Nested 'spans' ttomor 1 591 24th October 22:08
Last Post: ttomor
  [Solved] Opacity change on mouseenter and mouseleave dapperdanman1400 3 828 19th October 09:59
Last Post: dapperdanman1400
  [Solved] Ajax element width trogo 1 860 27th September 12:37
Last Post: Craig
  [Solved] Why is this not working - Link nested in tooltip needed 1 543 12th September 17:10
Last Post: Craig
  [Solved] Qtip assigned to an element, element is destroyed and created again, qtip doesnt work lovesniper 2 1,139 25th August 18:29
Last Post: Craig



User(s) browsing this thread: 1 Guest(s)