Member Avatar for Shreya J

Hi ,

In my application I have to implement Tooltip for Link Button.

When mouse hover on link button , I should get a Tooltip.
It can be a Telerik ToolTip as well.

Please help me with this concept.
I need step by step process for implementing this.

Regards.

  • 2 Contributors
  • 4 Replies
  • 1K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Shreya J

Dani AI

Generated

asked for a styled hover tooltip on an ASP.NET LinkButton and rightly pointed out client-side options. Below is a simple, no-library approach that gives full control over border, font and background, plus notes on when to pick a JS plugin or a Telerik tooltip for richer content.

Use a data attribute (set server-side) and style a pseudo-element. This keeps markup light and avoids extra scripts.

// set on server (Page_Load or when creating the control)
LinkButton1.CssClass = "has-tooltip";
LinkButton1.Attributes["data-tooltip"] = "Custom tooltip text";
.has-tooltip { position: relative; cursor: pointer; }

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: #222;
  color: #fff;
  padding: 6px 8px;
  border: 1px solid #999;
  border-radius: 4px;
  font: 12px/1.2 Arial, sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
  z-index: 9999;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.has-tooltip:hover::after,
.has-tooltip:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

Notes and quick tips:

  • Use this CSS when tooltip content is plain text. Pseudo-elements cannot contain HTML; for HTML/tooltips with images or AJAX, use a JS plugin or Telerik RadToolTip (attach by TargetControlID or via RadToolTipManager and use ContentTemplate/ContentUrl).
  • Accessibility: add aria-describedby or provide a keyboard/focus trigger so non-mouse users can read the text.
  • Common issues: clipped tooltips (parent overflow), z-index, and touch devices (hover does not work). Move tooltip to body or use JS show-on-click for touch.
    This approach covers styling needs (border, font, bg). For animated, interactive, or server-rendered content, pick a plugin or Telerik as a next step.

Recommended Answers

All 4 Replies

Member Avatar for Pats2KDynasty

Hi ,

In my application I have to implement Tooltip for Link Button.

When mouse hover on link button , I should get a Tooltip.
It can be a Telerik ToolTip as well.

Please help me with this concept.
I need step by step process for implementing this.

Regards.

<asp:LinkButton ID="lb" runat="server" ToolTip="Hi, you just hovered over me!"> </asp:LinkButton>

you could also use one of the many javascript tool out there like: <>

Member Avatar for Shreya J

Hey... Thank U :)

Actually I think I was not able to express my prob. properly...
I want to customise the Tooltip like border ,font ,background etc.

It will be very helpful if u can help me with this...
Thank u ...

Member Avatar for Pats2KDynasty

You can do that with <> tooltip.js.
All you have to do is download the file and put it in your scripts folder for your web site.
Then include a reference in your web page like: <script language="javascript" src="js/"></script>.
In the body tag initialize like: <body onload=init()>.
After the body tag place a div, which you can style, like: <div id="a" style="background-color:ivory;width: 150px; height: 49px;border: solid 1px gray; text-align: center;"> </div>.
Finally in your span, div, td tag put in onmouseover=if(t1)t1.Show(event,l1) onmouseout=if(t1)t1.Hide(event).
It is pretty simple. I got this example from: <>

Member Avatar for Shreya J

Thank u soooo much... It really helped... :)

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.