开发者

is there a way to increase the length tooltip is displayed in asp.net chart?

开发者 https://www.devze.com 2023-01-12 19:05 出处:网络
I have a chart that displays a tooltip (string) when hovered over. Is there a way to control the delay/t开发者_StackOverflowime the tooltip is displayed to the user?

I have a chart that displays a tooltip (string) when hovered over. Is there a way to control the delay/t开发者_StackOverflowime the tooltip is displayed to the user?

<asp:Chart runat="server" ID="Chart2" Width="340px" Height="265px">
        <!--Define Things in here-->
    </asp:Chart>

Backend:

    //define what rec is
    string tooltip = rec;
    Chart2.ToolTip = tooltip;


I just came up with a pretty simple solution to this classic problem with the help of some Javascript I borrowed from here: http://bonrouge.com/~js_tooltip

Asp.NET renders tooltips as a title attribute on the actual HTML page generated. You can take advantage of this fact to apply whatever style you like to the tooltip by overriding it with two very simple javascript functions.

function showTooltip(control) {
    var ttext = control.title;
    var tt = document.createElement('SPAN');
    var tnode = document.createTextNode(ttext);
    tt.appendChild(tnode);
    control.parentNode.insertBefore(tt, control.nextSibling);
    tt.className = "tooltipCss";
    control.title = "";
}
function hideTooltip(control) {
    var ttext = control.nextSibling.childNodes[0].nodeValue;
    control.parentNode.removeChild(control.nextSibling);
    control.title = ttext;
}

Next you need to design your css for your tooltip:

position:absolute; 
border:1px solid gray; 
width:300px; 
margin:1em; 
padding:3px; 
background: Red;

Finally you need to wire up the JavaScript to your control

Chart2.Attributes.Add("onmouseover", "showTooltip(this)");
Chart2.Attributes.Add("onmouseout", "hideTooltip(this)");

Hope this helps.... I've been looking for a SIMPLE way of doing Tooltips for all my Asp.Net stuff for ages. I don't like to declare my Tooltip code in separate spans or whatever as this is really no good for my dynamically generated stuff. Anyway I just wanted to add this somewhere online. Hope it helps someone out.


Sorry, but probably not.

Most tooltips are a browser feature, and display either the alt tag of an img, or the title tag of most elements. So the control of how long that tooltip displays is going to vary from browser to browser.

It's possible that the tooltip is under your control, and is an html element displayed with javascript on mouseover, or the charts and the tooltip might be in Flash or Silverlight, but if that's the case we'd need to see your code.


I'm guessing probably not. If you need more flexibility I would recommend going with a jQuery tooltip solution.


To add to Ravendarksky's answer: I used his code but if I moved my mouse during the mouseout event over the tooltip content, IE would issue an unhandled exception (no issues in Chrome, I did not check Firefox):

0x800a138f - JavaScript runtime error: Unable to get property 'nodeValue' of undefined or null reference

So I simply wrapped the implementation of hideTooltip in a conditional checking for null and all was well in IE [and Chrome]:

function hideTooltip(control) {
    if (control.nextSibling.childNodes[0] != null) {
        var ttext = control.nextSibling.childNodes[0].nodeValue;
        control.parentNode.removeChild(control.nextSibling);
        control.title = ttext;
    }


Or you can use HoverMenuExtender of asp.net. You can also modify the pop up content/design.

Code reference sample here: http://asp-net-example.blogspot.com/2009/11/ajax-hovermenuextender-how-to-use.html

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号