kisukedeath

Qtips codes

Sep 5th, 2014
195
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 2.80 KB | None | 0 0
  1. $('area').each(function(){
  2.             $(this).qtip({
  3.               content:
  4.                   '<div id="divimg">'+
  5.                   '<img src="img/'+ $(this).attr('imm') +'.png"></div>'
  6.               ,
  7.               show: {
  8.                   effect: function() { $(this).fadeIn(200); }
  9.               },
  10.               hide: {
  11.                     delay: 100,
  12.                     fixed: true,
  13.                     effect: function() { $(this).fadeOut(200); }
  14.               },
  15.               position: {
  16.                  my: 'top left',  // Position my top left...
  17.                  at: 'bottom left', // at the bottom right of...
  18.               },
  19.               style: {
  20.                 width: 'auto',
  21.                 height: 'auto',
  22.                 classes: 'qtip-light'
  23.               }
  24.             });
  25.           });
  26.  
  27. ========================================================================================================
  28.  
  29. $('area').each(function(){
  30.  
  31.             $(this).qtip({
  32.               content: '<div id="all">'+
  33.                 '<div id="divleft">'+
  34.                   '<div id="divimg"><span class="helper"></span>'+
  35.                   '<img src="img/'+ $(this).attr('imm') +'.jpg"></div>'+
  36.                 '<div id="divright">'+
  37.                   '<a target=_blank href='+$(this).attr('more')+'>read more</a>'+
  38.                  // $(this).attr('imm')+
  39.                 '</div>'+
  40.               '</div>'
  41.               ,
  42.               hide: {
  43.                     fixed: true
  44.               },
  45.               position: {
  46.                  my: 'top left',  // Position my top left...
  47.                  at: 'bottom center', // at the bottom right of...
  48.               },
  49.               style: {
  50.                 width: 'auto',
  51.                 height: 'auto',
  52.                 classes: 'qtip-light'
  53.               }
  54.             });
  55.           });
  56.  
  57. ========================================================================================================
  58.  
  59. $('area').each(function(){
  60.                     $(this).qtip({
  61.                         content:
  62.                             '<div id="all">'+
  63.                                 '<div id="box">'+
  64.                                     '<h2>'+$(this).attr('name')+'</h2></div>'+
  65.                                     '<b>Location: </b>'+ $(this).attr('title')+'<br>'+
  66.                                     '<br><b>Year: </b>'+ $(this).attr('year')+'<br>'+
  67.                                     '<br><b>Est. Value: </b>'+ $(this).attr('est')+'<br>'+
  68.                                     '<br><b>Myth/Fiction: </b>'+ $(this).attr('myth')+'<br>'+
  69.                                     '<br><b>Background: </b>'+ $(this).attr('background')+
  70.                                
  71.                                 '</div>',
  72.                         position: {
  73.                             corner: {
  74.                                 target: $(this).attr('target'),
  75.                                 tooltip: $(this).attr('tooltip')
  76.                             }
  77.                         },
  78.                         style: {
  79.                             width: 710,
  80.                             height: 350,
  81.                             classes: 'qtip',
  82.                             border: {
  83.                                 width: 0,
  84.                                 radius: 0,
  85.                                 color: '#999'
  86.                             },
  87.                         }
  88.                     });
  89.              });
Advertisement
Add Comment
Please, Sign In to add comment