Member Avatar for minimogul

found this code on this website cant find the url but if I find it i will post it
The code is basically the same as the following.I want to be able to place links inside the tool tip I was wondering if there was a way i could do this. I don't know much programming and am trying to learn jquery.Thanks for your help in advance.

a.help{
    position:relative; /*this is the key*/
    z-index:24;
    color:#fff;
    text-decoration:none;
	font-size:10px;
	}

a.help:hover{
z-index:25;
text-decoration:underline;}

a.help span{display: none}

a.help:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:1.5em; left:1em; width:15em;
	padding:5px;
	height:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: justify;
	float:left;
	left:-13em;
	}
  • 2 Contributors
  • 4 Replies
  • 202 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

Two quick facts that explain why links inside your current tooltip break: an anchor must not contain another anchor, and a hover-only tooltip placed inside the triggering link will disappear the moment the mouse leaves the trigger. already flagged the misplaced span — the simplest, safest fix is to make the tooltip a sibling of the trigger (wrapped together in a positioned container). That keeps markup valid and lets the tooltip contain normal clickable links.

Example pattern (structure only — adapt styles/content):

<span class="help-wrapper" style="position:relative;display:inline-block;">
  <a class="help-trigger" href="#">Need help?</a>
  <div class="tooltip" role="tooltip" aria-hidden="true">
    <h3>Account tips</h3>
    <p>Short guidance with links:</p>
    <a href="/reset">Reset password</a><br/>
    <a href="/support">Contact support</a>
  </div>
</span>

Key CSS/behavior notes:

  • Position the tooltip absolutely relative to the wrapper so it can float where you want. Give it pointer-events: auto so links are clickable. Use the wrapper :hover (not the anchor :hover) so moving from trigger into the tooltip doesn’t close it.
  • Add keyboard support and ARIA: show the tooltip on focus and hide on blur, and close with Escape. Example jQuery pattern:
$('.help-trigger').on('mouseenter focus', function(){
  $(this).next('.tooltip').show().attr('aria-hidden','false');
}).on('mouseleave blur', function(){
  $(this).next('.tooltip').hide().attr('aria-hidden','true');
});
$('.tooltip').on('keydown', function(e){
  if (e.key === 'Escape') { $(this).hide().attr('aria-hidden','true'); $(this).prev('.help-trigger').focus(); }
});

Troubleshooting checklist: ensure no nested anchors, avoid using bare href="#" (use a real URL or button), test keyboard/tab order, and if the tooltip is clipped by overflow, append it to body and compute position in JS. This approach keeps markup valid and lets you put multiple working links inside the tooltip.

Recommended Answers

All 4 Replies

Member Avatar for Arkinder

You've only posted the CSS. Links are placed in the HTML of the tooltip.

Regards, Arkinder

Member Avatar for minimogul

Sorry Thanks for telling me I forgot to post It. Well here it is.

<div id="help_info"><a href="#" class="help">Help?<span>

   <h3>*** Account help ***</h3>

   <p class="tooltip">text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p></span></a></div>

    </div>

I want to make a more sophisticated version of this so it will enable me to put multiple links with out breaking it thanks in advance.

Member Avatar for minimogul

Sorry there is also a span in front or the first paragraph tag.

Member Avatar for Arkinder

You have a span tag after Help? instead of ending your anchor tag.

Regards, Arkinder

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.