Organizational Chart + JQuery ToolTip

gakutaru · #1 (**permalink**) 15/09/2011, 19:38

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<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.6.2.min.js" language="javascript"></script>
    <script type="text/javascript" src="js/tooltip/jquery.bgiframe.js" language="javascript"></script>
    <script type="text/javascript" src="js/tooltip/jquery.delegate.js" language="javascript"></script>
    <script type="text/javascript" src="js/tooltip/jquery.dimensions.js" language="javascript"></script>
    <script type="text/javascript" src="js/tooltip/jquery.js" language="javascript"></script>
    <script type="text/javascript" src="js/tooltip/jquery.tooltip.js" language="javascript"></script>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type="text/javascript">
        $(function () {
            $('#a2').tooltip({
                delay: 0,
                showURL: false,
                bodyHandler: function () {
                    return $("<img/>").attr("src", this.src);
                }
            });
            $('#a3').tooltip({
                delay: 0,
                showURL: false,
                bodyHandler: function () {
                    return $("<img/>").attr("src", this.src);
                }
            });
        });
 
    </script>
    <script type='text/javascript'>
        google.load('visualization', '1', { packages: ['orgchart'] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');           
            data.addRows([
              [{ v: '1', f: 'Mike <div id="a2"><img src="Stylos/AngloStyle/icon_rss.gif" width="40" /></div>' }, '', 'The President'],
              [{ 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'],
              ['Alice', '1', ''],
              ['fernando', '1', ''],
              ['Bob', '2', 'Bob Sponge'],
              ['Bob1', '2', 'Bob Sponge'],
              ['Bob2', '2', 'Bob Sponge'],
              ['Bob3', 'fernando', 'Bob Sponge'],
              ['Bob4', 'fernando', 'Bob Sponge'],
              ['Bob5', 'fernando', 'Bob Sponge'],
              ['Carol', 'Bob', 'comentaroi']
            ]);
            //data.setRowProperty(2, 'style', 'border: 1px solid green; color: blue');
           
            var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
            chart.draw(data, { allowHtml: true, allowCollapse: true, selectionColor: '#00ff00', size: 'small' });
            //chart.collapse(1, true); //colapsa el nodo 1 por defecto
        }
    </script>
  </head>
 
  <body>
    <div id='chart_div'></div>
  </body>
</html>

Alguien puede ayudar?