I have contact details of different places in my DB, the names of these different places are displayed as links in a page, what i want is for the contact details of a place to be displayed in a tooltip when i click on the link name of that place. But that is not happening! What happens is that when i click the name of the place i get 2 tooltips stacked on top of each other displaying the wrong information!
*TOOLTIP CSS code* *#branch1 {outline:none; position: relative; font-weight: bold;}#branch1 {text-decoration:none;}/*#branches .contacts {}*/span.contacts1{ display:inline; position:absolute; color:#111; border:1px solid #000000; background: #000000; opacity: 0.9; color: white; font-weight: bold; font-size: small; border:1px solid #000000; border-radius: 25px;/*border-radius: 5px 100px 5px;*/; z-index:1; left: 40px; display:none; padding:14px 15px; margin-top:-56px; margin-left:70px; width:500px; line-height:16px;line-height:20px; }.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;} /*CSS3 extras*/CONTROLLER CODE* *def companies(): results=db.services(request.args(0)) rslts=db(db.company.services==results.id).select(db.company.ALL, orderby=db.company.company_name) return locals()THE VIEW* *<script> $(document).ready(function(){ $('.branch1').click(function(e) { $(this).each(function(){ $('.contacts1').fadeIn(); e.preventDefault(); }); }); $('img#close').click(function(e) { $('.contacts1').fadeOut(); e.preventDefault(); }); }); </script> <div class="comps"><span class="companies">COMPANIES (A-F)</span><br /><br />{{letters=['A', 'B', 'C', 'D', 'E', 'F'] for company in rslts: if company.company_name[0] in letters: company.company_name }}<a href="#" id="branch1" class="branch1 branches">{{=company.company_name}}</a><br /><span class="contacts1"><a href="#"><img src="{{=URL('static', 'images/close.png')}}" style="width: 50px; position: absolute; top:0px;right:0px;" id="close"/></a> <div class="info" id="logo"> <img id="companyLogo" width="140px" src="{{=URL('download', args=company.logo)}}" /><br /> <span style="position: absolute; bottom:0px; left: 10px;">SESOA™</span> </div> <div class="info" style="padding-left:5px; border-left: solid 1px white;" id="details"> <span class="companyName">{{=company.company_name}}</span> <hr class="divider" /> <span class="contact" id="cell">TEL: </span><strong style="color:green;">{{=company.tel}}</strong><br /><span class="contact" id="cell">EM@IL: </span> <strong style="color:green;">{{=company.email}}</strong><br /><span class="contact" id="cell">CELL: </span><strong style="color:green;">{{=company.cell}}</strong><br /> <span class="contact" id="fb">Facebook: </span> <strong style="color:green;">{{=company.facebook}}</strong><br /> <span class="contact" id="twit">Twitter: </span> <strong style="color:green;">{{=company.twitter}}</strong><br /> <a href="{{=company.website}}" target="_blank"><span class="contact" id="e_mail">WEBSITE: </span> <strong style="color:green;">{{=company.website}}</strong></span></a><br /><span class="contact" id="cell">FAX: </span> <strong style="color:green;">{{=company.fax}}</strong><br /><span class="contact" id="cell">LOCATION: </span> <strong style="color:green;">{{=company.located_at}}</strong><br /> </div></span> {{pass}} {{pass}} </div><!----------------------------------------------------------------------------------------------------------------------------->* -- Resources: - http://web2py.com - http://web2py.com/book (Documentation) - http://github.com/web2py/web2py (Source code) - https://code.google.com/p/web2py/issues/list (Report Issues) --- You received this message because you are subscribed to the Google Groups "web2py-users" group. To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.