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