Member Avatar for sureronald

Hi Everyone.
My question is how do you customise the title attribute commonly used in HTML tags just like here at Daniweb when you hover your mouse over a thread topic.
Any help will be highly appreciated

sureronald!

  • 3 Contributors
  • 4 Replies
  • 931 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by sureronald

Dani AI

Generated

Short answer for : the little box you see from title is the browser/OS tooltip and you cannot change its look with CSS — it is rendered by the user agent and is not reliable for keyboard or touch users. correctly showed the title usage, and was right that a styled tooltip uses CSS — but to actually style it you must create your own tooltip element or attribute rather than rely on the native title. (developer.mozilla.org)

Practical approach: move the tooltip text into your own attribute or element (for example data-tooltip or an adjacent hidden <div>) and style that with CSS; make the trigger focusable (tabindex="0") so keyboard users can open it. If you keep existing title values as source text, copy them into your data-* and remove the title at runtime so the native tooltip does not show as well. Example pattern (abbreviated):

<span class="tooltip" data-tooltip="More info" tabindex="0">Label</span>
.tooltip { position: relative; }
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background:#222;color:#fff;padding:6px;border-radius:4px;
  white-space:nowrap; opacity:0; transition:.12s;
}
.tooltip:hover::after,
.tooltip:focus::after { opacity:1; }

To avoid the native box, copy/remove title with a small script (one-liner shown in many examples). (stackoverflow.com)

Accessibility notes: implement aria-describedby on the trigger that references the tooltip element and give the tooltip role="tooltip". Ensure it appears on focus and hover, can be dismissed (Escape), and do not put interactive controls inside a tooltip. If the information is essential, make it visible in the page (do not rely solely on title). See the WAI-ARIA tooltip pattern and MDN guidance for specifics. (w3.org)

Troubleshooting: test with keyboard-only navigation, on mobile, and with a screen reader. If you still see the browser tooltip, check that no title remains on the element (native tooltips appear when title exists).

Recommended Answers

All 4 Replies

Member Avatar for ShawnCplus 
<a href="blah" title="This is your title">some link</a>

You answered your own question

Member Avatar for sureronald

Thanks ShawnCplus for your reply but this code

<a href="blah" title="This is your title">some link</a>

will just give you the default sharp cornered box containing the text in the title attribute when you point this link. How do you change the appearance of this box like I see here at Daniweb and in the joomla administration?
Thanks

Member Avatar for almostbob

css

// for a element titles
a[title] { font:bla; background:(url to image with round corners); color:bla;  padding: enough to bring the background out; }
// for all element titles
*[title] { font:bla; background:(url to image with round corners); color:bla; padding: enough to bring the background out; }
Member Avatar for sureronald

Thanks for this Almostbob

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.