Solved

tooltipsy jquery plugin fetch json

Posted on 2013-06-11
3
698 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
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)

728 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now