javascript - plugin - shortcodes para wordpress
Tabla de herramientas de Google Custom Tooltip (0)
Intento crear una información sobre herramientas personalizada para mi Google Bubble Chart que muestra el contenido al pasar el mouse y luego desaparece en mouseout. En este momento, solo muestra el contenido "estándar" de información sobre herramientas de Google. Hay otra pregunta aquí donde obtuve el JS, pero no puedo comentarlo ya que mi representante no es lo suficientemente alto. Mi código y jsfiddle están abajo. Toda ayuda es muy apreciada. ¡Gracias!
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[''Data1'',''Data2'',''Data3'',''Data4'',''Data5'',''Data6'',''Data7'',''Data8''],
[''This is Data1'',7500,2757,''This is Data 4'',4,''This is Data 6'',''This is Data 8'',330],
]);
var options = {
title: ''Test Title'',
hAxis: {title: ''Test hAxis''},
vAxis: {title: ''Test vAxis''},
bubble: {textStyle: {fontSize: 11}}
};
var chart = new google.visualization.BubbleChart(document.getElementById(''chart_div''));
chart.draw(data, options);
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
function handler1(e){
var x = mouseX;
var y = mouseY - 130;
var a = 1;
var b = 2;
$(''#custom_tooltip'').html(''<div>Value of A is''+a+'' and value of B is''+b+''</div>'').css({''top'':y,''left'':x}).fadeIn(''slow'');
}
function handler2(e){
$(''#custom_tooltip'').fadeOut(''fast'');
}
google.visualization.events.addListener(chart, ''onmouseover'', handler1);
google.visualization.events.addListener(chart, ''onmouseout'', handler2);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>