Member Avatar for RAMAN2233

How to add a tooltip over a textbox in asp.net or javascript?
If given in javascript then please explain perfectly because i dont know javascript.
Please help..................

  • 3 Contributors
  • 2 Replies
  • 101 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

— below are practical choices that build on the suggestions from and , with an emphasis on accessibility and simple copy‑paste options so you can get a working tooltip quickly.

The simplest no‑JavaScript route is to provide an explicit description on the page and point the input at it with aria-describedby. That makes the help available to screen readers and does not rely on hover (which mobile devices don’t have). In ASP.NET WebForms you can add this server‑side, for example:

TextBox1.Attributes.Add("aria-describedby","help1");

and put a <span id="help1">...</span> near the field (use a visually‑hidden class if you don’t want it visible).

If you are willing to use a tiny bit of JavaScript, this minimal pattern creates a keyboard‑friendly tooltip from a data-tooltip attribute. Paste the HTML, CSS and the script near the end of the page:

HTML

<input id="email" type="text" data-tooltip="Enter your email for receipts">

CSS

.dw-tooltip {
  position: absolute;
  background:#222;color:#fff;padding:6px;border-radius:4px;font-size:12px;
  z-index:10000;pointer-events:none;
}

JavaScript

document.addEventListener('DOMContentLoaded',function(){
  function showTooltip(el){
    var txt=el.getAttribute('data-tooltip'); if(!txt) return;
    var tip=document.createElement('div'); tip.className='dw-tooltip';
    tip.setAttribute('role','tooltip'); tip.id='t'+Date.now(); tip.textContent=txt;
    document.body.appendChild(tip);
    var r=el.getBoundingClientRect();
    tip.style.left=(r.left+window.scrollX)+'px';
    tip.style.top=(r.bottom+window.scrollY+6)+'px';
    el.setAttribute('aria-describedby',tip.id); el._dwTip=tip;
  }
  function hideTooltip(el){ if(!el._dwTip) return; el._dwTip.remove(); el.removeAttribute('aria-describedby'); el._dwTip=null; }
  ['focus','mouseenter'].forEach(e=>document.addEventListener(e,ev=>{var t=ev.target.closest('[data-tooltip]'); if(t) showTooltip(t);},true));
  ['blur','mouseleave'].forEach(e=>document.addEventListener(e,ev=>{var t=ev.target.closest('[data-tooltip]'); if(t) hideTooltip(t);},true));
});

Troubleshooting: watch z‑index and positioning when inside scrolled containers; use pointer-events:none on the tooltip to avoid hover flicker; add touchstart handling for mobile if needed. Read the ARIA tooltip guidance and aria-describedby details for best practices: WAI-ARIA tooltip pattern and MDN aria-describedby. If you prefer a library, jQuery UI’s tooltip follows ARIA patterns and can save time.

Recommended Answers

All 2 Replies

Member Avatar for Ramesh S

ASP.NET TextBox control has a built-in Tooltip property which displays the tooltip text when the mouse is over the control.

If you want to implement a custom tooltip, refer this link.
TextBox With Tool Tip Control Implementation

You can also try to use . It is open source tooll that uses javascript / DHTML to show tooltips on a website.

Member Avatar for Dani

Here on DaniWeb we use JQuery for all of our tooltips.

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.