tooltipsy jquery plugin fetch json

Posted on 2013-06-11
Last Modified: 2013-06-14
I saw this example using the jquery plugin called tooltipsy:

The tooltipsy plugin is available from here:

I followed the example from the above link:

I have a page called tooltipsyjson2.aspx this is what I have:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tooltipsyjson2.aspx.vb" Inherits="tt1.tooltipsyjson2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<head id="Head1" runat="server">
<style type="text/css">

.TestText1 {font-family: Arial; color: #FF0000; font-size: 12px; font-weight: normal;}

span.hastip {

    <%-- referening jquery library --%>
    <script language="javascript" type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
    <%-- referening the tooltipsy plugin --%>
    <script language="javascript" type="text/javascript" src="Scripts/tooltipsymin.js"></script>
    <%-- tooltipsy Function --%>
    <script language="javascript" type="text/javascript">

        $(document).ready(function () {

//                showEvent: 'click',
//                hideEvent: 'click',
//                offset: [10, 0],
                show: function (e, $el) {
                        'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px',
                        'opacity': '0.0',
                        'display': 'block'
                        'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) + 50 + 'px',
                        'opacity': '1.0'
                    }, 300);
//                hide: function (e, $el) {
//                    $el.slideUp(100);
//                },
                content: function ($el, $tip) {
                    var $el = $(this);
                    var active_tooltip = $el.attr('rel');

                    $.getJSON('test.json', function (data) {

                        $tip.html(function () {
                            var title = data.users[active_tooltip].name;
                            var mtext = data.users[active_tooltip].functie;
                            return '<div>' + title + mtext + '</div>';
                    return 'Fallback content';
                css: {
                    'padding': '10px',
                    'max-width': '200px',
                    'color': '#000000',
                    'background-color': '#f5f5f5',
                    'border': '1px solid #e3e3e3'

    <form id="form1" runat="server">
        <br />
        <br />
        <br />
        <br />
        <br />
        This is a test of  <span class="hastip" rel="0">tooltipsy</span>
        <br />
        <br />

Open in new window

My directory looks like this:

my directory
My test.js file looks like this:

"users" : [ 
        "name"   : "John",
        "functie" : "Frontend webdev"
        "name"   : "Doe", 
        "functie" : "backend webdev"


Open in new window

Here is the code for tooltipsymin.js

/* tooltipsy by Brian Cray
* Lincensed under GPL2 -
* Option quick reference:
* - alignTo: "element" or "cursor" (Defaults to "element")
* - offset: Tooltipsy distance from element or mouse cursor, dependent on alignTo setting. Set as array [x, y] (Defaults to [0, -1])
* - content: HTML or text content of tooltip. Defaults to "" (empty string), which pulls content from target element's title attribute
* - show: function(event, tooltip) to show the tooltip. Defaults to a show(100) effect
* - hide: function(event, tooltip) to hide the tooltip. Defaults to a fadeOut(100) effect
* - delay: A delay in milliseconds before showing a tooltip. Set to 0 for no delay. Defaults to 200
* - css: object containing CSS properties and values. Defaults to {} to use stylesheet for styles
* - className: DOM class for styling tooltips with CSS. Defaults to "tooltipsy"
* - showEvent: Set a custom event to bind the show function. Defaults to mouseenter
* - hideEvent: Set a custom event to bind the show function. Defaults to mouseleave
* Method quick reference:
* - $('element').data('tooltipsy').show(): Force the tooltip to show
* - $('element').data('tooltipsy').hide(): Force the tooltip to hide
* - $('element').data('tooltipsy').destroy(): Remove tooltip from DOM
* More information visit
;(function(a){a.tooltipsy=function(c,b){this.options=b;this.$el=a(c);this.title=this.$el.attr("title")||"";this.$el.attr("title","");this.random=parseInt(Math.random()*10000);this.ready=false;this.shown=false;this.width=0;this.height=0;this.delaytimer=null;this.$"tooltipsy",this);this.init()};a.tooltipsy.prototype={init:function(){var e=this,d,b=e.$el,c=b[0];e.settings=d=a.extend({},e.defaults,e.options);d.delay=+d.delay;if(typeof d.content==="function"){e.readify()}if(d.showEvent===d.hideEvent&&d.showEvent==="click"){b.toggle(function(f){if(d.showEvent==="click"&&c.tagName=="A"){f.preventDefault()}if(d.delay>0){e.delaytimer=window.setTimeout(function(){},d.delay)}else{}},function(f){if(d.showEvent==="click"&&c.tagName=="A"){f.preventDefault()}window.clearTimeout(e.delaytimer);e.delaytimer=null;e.hide(f)})}else{b.bind(d.showEvent,function(f){if(d.showEvent==="click"&&c.tagName=="A"){f.preventDefault()}e.delaytimer=window.setTimeout(function(){},d.delay||0)}).bind(d.hideEvent,function(f){if(d.showEvent==="click"&&c.tagName=="A"){f.preventDefault()}window.clearTimeout(e.delaytimer);e.delaytimer=null;e.hide(f)})}},show:function(i){if(this.ready===false){this.readify()}var b=this,f=b.settings,h=b.$tipsy,k=b.$el,d=k[0],g=b.offset(d);if(b.shown===false){if((function(m){var l=0,e;for(e in m){if(m.hasOwnProperty(e)){l++}}return l})(f.css)>0){b.$tip.css(f.css)}b.width=h.outerWidth();b.height=h.outerHeight()}if(f.alignTo==="cursor"&&i){var j=[i.clientX+f.offset[0],i.clientY+f.offset[1]];if(j[0]+b.width>a(window).width()){var c={top:j[1]+"px",right:j[0]+"px",left:"auto"}}else{var c={top:j[1]+"px",left:j[0]+"px",right:"auto"}}}else{var j=[(function(){if(f.offset[0]<0){return g.left-Math.abs(f.offset[0])-b.width}else{if(f.offset[0]===0){return g.left-((b.width-k.outerWidth())/2)}else{return g.left+k.outerWidth()+f.offset[0]}}})(),(function(){if(f.offset[1]<0){return[1])-b.height}else{if(f.offset[1]===0){return$el.outerHeight())/2)}else{return$el.outerHeight()+f.offset[1]}}})()]}h.css({top:j[1]+"px",left:j[0]+"px"});,h.stop(true,true))},hide:function(c){var b=this;if(b.ready===false){return}if(c&&c.relatedTarget===b.$tip[0]){b.$tip.bind("mouseleave",function(d){if(d.relatedTarget===b.$el[0]){return}b.settings.hide(d,b.$tipsy.stop(true,true))});return}b.settings.hide(c,b.$tipsy.stop(true,true))},readify:function(){this.ready=true;this.$tipsy=a('<div id="tooltipsy'+this.random+'" style="position:fixed;z-index:2147483647;display:none">').appendTo("body");this.$tip=a('<div class="'+this.settings.className+'">').appendTo(this.$tipsy);this.$"rootel",this.$el);var c=this.$el;var b=this.$tip;this.$tip.html(this.settings.content!=""?(typeof this.settings.content=="string"?this.settings.content:this.settings.content(c,b)):this.title)},offset:function(b){return this.$el[0].getBoundingClientRect()},destroy:function(){if(this.$tipsy){this.$tipsy.remove();a.removeData(this.$el,"tooltipsy")}},defaults:{alignTo:"element",offset:[0,-1],content:"",show:function(c,b){b.fadeIn(100)},hide:function(c,b){b.fadeOut(100)},css:{},className:"tooltipsy",delay:200,showEvent:"mouseenter",hideEvent:"mouseleave"}};a.fn.tooltipsy=function(b){return this.each(function(){new a.tooltipsy(this,b)})}})(jQuery);

Open in new window

When I run my asp page I get this:

when I run my page
When I mouse over the word tooltipsy the tooltip is working right but the data from the json file doesnt show.
The fallback text content is what shows in the tooltip.

Any ideas of where I'm making a mistake?.
The tooltip should show the data from the test.js file.

thanks any info you can help me with.
Question by:maqskywalker
  • 2
LVL 23

Expert Comment

by:Ioannis Paraskevopoulos
ID: 39241382

I haven't really tested your code as i am away of my coding environment... but i see you are referencing test.json in:

Open in new window

Shouldn't it be :

Open in new window


Author Comment

ID: 39241511

I renamed the json file test.json and test.js  and renamed it in the javascript also.
I don't think that is the issue because it worked the same either way I named the json file.

So I think the issue is elsewhere. I'm looking into figuring it out.
LVL 23

Accepted Solution

Ioannis Paraskevopoulos earned 500 total points
ID: 39243754

I found it:

1.Do change the test.json to test.js
2.Add an id attribute on your span as shown bellow:
<span id= "myTestTooltip" class="hastip" rel="0">tooltipsy</span>

Open in new window

3.In the content reference your span by its Id:
content: function ($el, $tip) {
                    var $el = [b]$("#myTestTooltip")[/b];
                    var active_tooltip = $el.attr('rel');
                    $.getJSON('test.js', function (data) {

                        $tip.html(function () {
                            var title = data.users[active_tooltip].name;
                            var mtext = data.users[active_tooltip].functie;
                            return '<div>' + title + mtext + '</div>';
                    return 'Fallback content';

Open in new window

Hope this helps...

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question