Solved

tooltipsy jquery plugin fetch json

Posted on 2013-06-11
3
707 Views
Last Modified: 2013-06-14
I saw this example using the jquery plugin called tooltipsy:
http://stackoverflow.com/questions/15245749/tooltip-json-content-load

The tooltipsy plugin is available from here:
http://tooltipsy.com

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
<style type="text/css">

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

span.hastip {
    background:#000;
    width:15px;
    height:15px;
    display:inline-block;
    margin-left:10px;
}

</style>
    <%-- 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 () {

            $('.hastip').tooltipsy({
//                showEvent: 'click',
//                hideEvent: 'click',
//                offset: [10, 0],
                show: function (e, $el) {
                    $el.css({
                        'left': parseInt($el[0].style.left.replace(/[a-z]/g, '')) - 50 + 'px',
                        'opacity': '0.0',
                        'display': 'block'
                    }).animate({
                        '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'
                }
            });
        });


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

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 - http://www.gnu.org/licenses/gpl-2.0.html
* 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 http://tooltipsy.com/
*/
;(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.$el.data("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(){e.show(f)},d.delay)}else{e.show(f)}},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(){e.show(f)},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 g.top-Math.abs(f.offset[1])-b.height}else{if(f.offset[1]===0){return g.top-((b.height-b.$el.outerHeight())/2)}else{return g.top+b.$el.outerHeight()+f.offset[1]}}})()]}h.css({top:j[1]+"px",left:j[0]+"px"});b.settings.show(i,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.$tip.data("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.
0
Comment
Question by:maqskywalker
  • 2
3 Comments
 
LVL 23

Expert Comment

by:Ioannis Paraskevopoulos
ID: 39241382
Hi,

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

Open in new window


Shouldn't it be :
 $.getJSON('test.js'

Open in new window


Giannis
0
 
LVL 1

Author Comment

by:maqskywalker
ID: 39241511
Giannis,

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.
0
 
LVL 23

Accepted Solution

by:
Ioannis Paraskevopoulos earned 500 total points
ID: 39243754
Hi,

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');
                    $el.text="DAHBDGTSHFDH"
                    $.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...
Giannis
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

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.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

830 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