anyone know how to customize the tooltip look of an asp.net chart?
I'm looking to customize the tool开发者_如何学编程tip look of an asp.net chart. Does anyone have a suggestion on where to start looking?
The tooltip itself is probably implemented through basic HTML. If you want a more sophisticated tooltip, look into jQuery tooltip plugins.
There is a better way to do this. First, create two javascript functions (we'll call them f1 and f2). These two functions will be used to respond to mouse events. In this example, the f1 function receives the event as well as a string to be displayed in the tool tip popup. The f2 function hides the tool tip popup.
function f1(e, str) {
tooltip = document.getElementById("toolTip");
tooltip.innerHTML = str;
if (!e) var e = window.event;
var posx = 0;
var posy = 0;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
posy = Math.round(posy);
posx = Math.round(posx);
tooltip.style.top = posy + 'px';
tooltip.style.left = posx + 'px';
}
function f2() {
document.getElementById("toolTip").innerHTML = "";
}
Now, for the tool tip popup, we create a div in the .aspx page like this. Makes its positioning absolute so we can place it anywhere on the page. You can add all the customization you want to the div, but in this case we will just show some text:
<div style="position:absolute; background-color:White; color:Black; id="toolTip"></div>
Now, in your code-behind, you can associate elements of your asp.net chart with events that will trigger the f1 and f2 javascript functions. For example, we can show a the tool tip popup when the mouse hovers over a data point, and hide it when it leaves the data point.
int count = graph.Series["Default"].Points.Count;
for (int i = 0; i < count; i++)
{
string toolTipText = "My Text";
graph.Series["Default"].Points[i].MapAreaAttributes = "onmouseover=\"f1(event, '" + toolTipText + "')\" onmouseout=\"f2()\"";
}
If a delay before showing the tool tip popup is desired, you can add the delay to the javascript.
精彩评论