Foros del Web » Programando para Internet » Jquery »

Organizational Chart + JQuery ToolTip

Estas en el tema de Organizational Chart + JQuery ToolTip en el foro de Jquery en Foros del Web. Hola a todos, estoy utilizando el “Google Organizational Chart” para mostrar mi organigrama, ahora, intento combinarlo con el “ToolTip” de “JQuery” para mostrar mas información ...
  #1 (permalink)  
Antiguo 15/09/2011, 19:38
Avatar de gakutaru  
Fecha de Ingreso: agosto-2005
Ubicación: frente a mi NtbK
Mensajes: 238
Antigüedad: 13 años, 10 meses
Puntos: 6
Pregunta Organizational Chart + JQuery ToolTip

Hola a todos, estoy utilizando el “Google Organizational Chart” para mostrar mi organigrama, ahora, intento combinarlo con el “ToolTip” de “JQuery” para mostrar mas información sin deformar el organigrama, sin embargo, no funciona correctamente.

La extensión Tooltip.js devuelve el siguiente error.

Código:
Detalles de error de página web
Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
Fecha: Fri, 16 Sep 2011 02:10:52 UTC
Mensaje: 'nodeType' es nulo o no es un objeto
Línea: 149
Carácter: 4
Código: 0
URI: http://localhost/ApDesMV/js/tooltip/jquery.tooltip.js
Mensaje: 'nodeType' es nulo o no es un objeto
Línea: 149
Carácter: 4
Código: 0
URI: http://localhost/ApDesMV/js/tooltip/jquery.tooltip.js
Este es eñ codigo que tengo

Código Javascript:
Ver original
  1. <html>
  2.   <head>
  3.     <script type="text/javascript" src="js/jquery-1.6.2.min.js" language="javascript"></script>
  4.     <script type="text/javascript" src="js/tooltip/jquery.bgiframe.js" language="javascript"></script>
  5.     <script type="text/javascript" src="js/tooltip/jquery.delegate.js" language="javascript"></script>
  6.     <script type="text/javascript" src="js/tooltip/jquery.dimensions.js" language="javascript"></script>
  7.     <script type="text/javascript" src="js/tooltip/jquery.js" language="javascript"></script>
  8.     <script type="text/javascript" src="js/tooltip/jquery.tooltip.js" language="javascript"></script>
  9.     <script type='text/javascript' src='https://www.google.com/jsapi'></script>
  10.     <script type="text/javascript">
  11.         $(function () {
  12.             $('#a2').tooltip({
  13.                 delay: 0,
  14.                 showURL: false,
  15.                 bodyHandler: function () {
  16.                     return $("<img/>").attr("src", this.src);
  17.                 }
  18.             });
  19.             $('#a3').tooltip({
  20.                 delay: 0,
  21.                 showURL: false,
  22.                 bodyHandler: function () {
  23.                     return $("<img/>").attr("src", this.src);
  24.                 }
  25.             });
  26.         });
  27.  
  28.     </script>
  29.     <script type='text/javascript'>
  30.         google.load('visualization', '1', { packages: ['orgchart'] });
  31.         google.setOnLoadCallback(drawChart);
  32.         function drawChart() {
  33.             var data = new google.visualization.DataTable();
  34.             data.addColumn('string', 'Name');
  35.             data.addColumn('string', 'Manager');
  36.             data.addColumn('string', 'ToolTip');          
  37.             data.addRows([
  38.               [{ v: '1', f: 'Mike <div id="a2"><img src="Stylos/AngloStyle/icon_rss.gif" width="40" /></div>' }, '', 'The President'],
  39.               [{ v: '2', f: 'Jim<div id="a3" style="color:red; font-style:italic">Vice President</br><img src="Stylos/AngloStyle/icon_rss.gif" width="30" /></div>' }, '1', 'VP'],
  40.               ['Alice', '1', ''],
  41.               ['fernando', '1', ''],
  42.               ['Bob', '2', 'Bob Sponge'],
  43.               ['Bob1', '2', 'Bob Sponge'],
  44.               ['Bob2', '2', 'Bob Sponge'],
  45.               ['Bob3', 'fernando', 'Bob Sponge'],
  46.               ['Bob4', 'fernando', 'Bob Sponge'],
  47.               ['Bob5', 'fernando', 'Bob Sponge'],
  48.               ['Carol', 'Bob', 'comentaroi']
  49.             ]);
  50.             //data.setRowProperty(2, 'style', 'border: 1px solid green; color: blue');
  51.            
  52.             var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
  53.             chart.draw(data, { allowHtml: true, allowCollapse: true, selectionColor: '#00ff00', size: 'small' });
  54.             //chart.collapse(1, true); //colapsa el nodo 1 por defecto
  55.         }
  56.     </script>
  57.   </head>
  58.  
  59.   <body>
  60.     <div id='chart_div'></div>
  61.   </body>
  62. </html>

Alguien puede ayudar?

Etiquetas: chart, html, javascript, js, tooltip
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:49.