Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 748
  • Last Modified:

tooltipsy jquery plugin fetch json

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
maqskywalker
Asked:
maqskywalker
  • 2
1 Solution
 
Ioannis ParaskevopoulosCommented:
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
 
maqskywalkerAuthor Commented:
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
 
Ioannis ParaskevopoulosCommented:
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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now