// Create the tooltips only on document load
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $("a[rel='mypage']").each(function()
   {
      $(this).qtip(
      {
         content: '<div style="font-size: 12px;color:#ff0000;" align="center"><a href="../about_mypage/index.html">マイページでできること</a></div>'
        ,
         position: {
            corner: {
               target: 'topMiddle', // Position the tooltip above the link
               tooltip: 'bottomRight'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            } 
         },
         show: { 
            //when: 'click',
			show: 'mouseover',
            solo: true // Only show one tooltip at a time
         },
         hide: { when: { event: 'mouseout'}, delay: 1500 },
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 1,
               radius: 4,
			   color: '#9cafbd'
            },
            name: 'light', // Use the default light style
            width: 200 // Set the tooltip width
         }
      })
   });
});

//ART EXD ツールチップ1
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $(".atention1_icon img").each(function()
   {
      $(this).qtip(
      {
         content: '<div class="atention_box1"><div class="font13b">表紙(000000.psd) とブックケース(excase.psd) とでは、表と裏の位置が異なります！</div><div class="space15"></div><div class="atention_box1_right"><div class="font13b">表紙用ホワイトベース</div><div class="space10"></div><div class="font13">表紙を作成するためのホワイトベースは、図１のように、背表紙より左側が「裏表紙」、右側が「表紙」です。<br /><br />※EXは巻き表紙とブック本体のハードカバー部分の表紙が同じホワイトベースで作成されます。巻き表紙とハードカバー部分のデータは同一になります。</div></div><div class="atention_box1_left"><img src="img/common/art_exd/atenntion1_pic1.jpg" width="278" height="185" /></div><div class="clearfloat"></div></div>'
        ,
         position: {
            corner: {
               target: 'topMiddle', // Position the tooltip above the link
               tooltip: 'bottomMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            } 
         },
         show: { 
            //when: 'click',
			show: 'mouseover',
            solo: true // Only show one tooltip at a time
         },
         hide: { when: { event: 'mouseout'}, delay: 0 },
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 1,
               radius: 4,
			   color: '#9cafbd'
            },
            name: 'light', // Use the default light style
            width: 630 // Set the tooltip width
         }
      })
   });
});

//ART EXD ツールチップ2_1
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $(".atention2_icon1 img").each(function()
   {
      $(this).qtip(
      {
         content: '<div class="atention_box2"><div class="font13b">ブック本体と違い、ケースは折りシロ部分が隠れます！</div><div class="space15"></div><div class="font13">ホワイトベースの削除レイヤーを確認して下さい。折りシロ（隠れる部分）や巻き込み部分があります。<br />色を塗ったデータを組み立て、背表紙側から上部を見たところ。 手前の赤い部分はブックケース裏面です。上部に赤い部分が少し入り込み、折りシロの緑の部分が少し見えています。データを作成するときは、折りシロの部分のガイドライン（一番外側のガイドライン）を超えて画像を配置してください。</div><div class="space10"><div><img src="img/common/art_exd/atenntion2_pic.jpg" width="528" height="198" /></div></div>'
        ,
         position: {
            corner: {
               target: 'topMiddle', // Position the tooltip above the link
               tooltip: 'bottomMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            } 
         },
         show: { 
            //when: 'click',
			show: 'mouseover',
            solo: true // Only show one tooltip at a time
         },
         hide: { when: { event: 'mouseout'}, delay: 0 },
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 1,
               radius: 4,
			   color: '#9cafbd'
            },
            name: 'light', // Use the default light style
            width: 610 // Set the tooltip width
         }
      })
   });
});

//ART EXD ツールチップ2_2
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $(".atention2_icon2 img").each(function()
   {
      $(this).qtip(
      {
         content: '<div class="atention_box1"><div class="font13b">表紙(000000.psd) とブックケース(excase.psd) とでは、表と裏の位置が異なります！</div><div class="space15"></div><div class="atention_box1_right"><div class="font13b">ケース用ホワイトベース</div><div class="space10"></div><div class="font13">ケースを作成するためのホワイトベースは、図２のように、背表紙より左側が「表面」、右側が「裏面」です。</div></div><div class="atention_box1_left"><img src="img/common/art_exd/atenntion1_pic2.jpg" width="278" height="185" /></div><div class="clearfloat"></div></div>'
        ,
         position: {
            corner: {
               target: 'topMiddle', // Position the tooltip above the link
               tooltip: 'bottomMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            } 
         },
         show: { 
            //when: 'click',
			show: 'mouseover',
            solo: true // Only show one tooltip at a time
         },
         hide: { when: { event: 'mouseout'}, delay: 0 },
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 1,
               radius: 4,
			   color: '#9cafbd'
            },
            name: 'light', // Use the default light style
            width: 630 // Set the tooltip width
         }
      })
   });
});


//ボードプレミアム ツールチップ1_1
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $(".atention3_icon1 img").each(function()
   {
      $(this).qtip(
      {
         content: '<div class="atention_box3_1"><div class="font13b">表紙(000000.psd）とブックケース（premium-box.psd)とでは、<br />表と裏の位置が異なります！！</div><div class="space15"></div><div class="atention_box2_right"><div class="font13b">表紙用ホワイトベース</div><div class="space10"></div><div class="font13">表紙を作成するためのホワイトベースは、図１のように、背表紙より左側が「裏表紙」、右側が「表紙」です。</div></div><div class="atention_box2_left"><img src="img/common/board_premium/atenntion1_pic1_1.jpg" width="318" height="161" /></div><div class="clearfloat"></div></div>'
        ,
         position: {
            corner: {
               target: 'topMiddle', // Position the tooltip above the link
               tooltip: 'bottomMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            } 
         },
         show: { 
            //when: 'click',
			show: 'mouseover',
            solo: true // Only show one tooltip at a time
         },
         hide: { when: { event: 'mouseout'}, delay: 0 },
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 1,
               radius: 4,
			   color: '#9cafbd'
            },
            name: 'light', // Use the default light style
            width: 598 // Set the tooltip width
         }
      })
   });
});

//ボードプレミアム ツールチップ1_2
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $(".atention3_icon2 img").each(function()
   {
      $(this).qtip(
      {
         content: '<div class="atention_box3_2"><div class="atention_box3_right"><div class="space30"></div><div class="font13b">ボードプレミアム はブック本体の表紙に段差があります。</div><div class="space10"></div><div class="font13">この段差に文字や大事なイメージが重なると、見えづらくなる事もありますのでご注意下さい。</div></div><div class="atention_box3_left"><img src="img/common/board_premium/atenntion1_pic2.jpg" width="235" height="194" /></div><div class="clearfloat"></div></div>'
        ,
         position: {
            corner: {
               target: 'topMiddle', // Position the tooltip above the link
               tooltip: 'bottomMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            } 
         },
         show: { 
            //when: 'click',
			show: 'mouseover',
            solo: true // Only show one tooltip at a time
         },
         hide: { when: { event: 'mouseout'}, delay: 0 },
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 1,
               radius: 4,
			   color: '#9cafbd'
            },
            name: 'light', // Use the default light style
            width: 535 // Set the tooltip width
         }
      })
   });
});

//ボードプレミアム ツールチップ2
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $(".atention4_icon img").each(function()
   {
      $(this).qtip(
      {
         content: '<div class="atention_box4"><div class="font13b">表紙(000000.psd）とブックケース（premium-box.psd)とでは、<br />表と裏の位置が異なります！！</div><div class="space15"></div><div class="atention_box2_right"><div class="font13b">ケース用ホワイトベース</div><div class="space10"></div><div class="font13">ケースを作成するためのホワイトベースは、図２のように、背表紙より左側が「表面」、右側が「裏面」です。</div></div><div class="atention_box2_left"><img src="img/common/board_premium/atenntion1_pic1_2.jpg" width="318" height="161" /></div><div class="clearfloat"></div></div>'
        ,
         position: {
            corner: {
               target: 'topMiddle', // Position the tooltip above the link
               tooltip: 'bottomMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            } 
         },
         show: { 
            //when: 'click',
			show: 'mouseover',
            solo: true // Only show one tooltip at a time
         },
         hide: { when: { event: 'mouseout'}, delay: 0 },
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 1,
               radius: 4,
			   color: '#9cafbd'
            },
            name: 'light', // Use the default light style
            width: 598 // Set the tooltip width
         }
      })
   });
});

//ボードプレミアム ツールチップ3
$(document).ready(function() 
{
   // Use the each() method to gain access to each elements attributes
   $(".atention5_icon img").each(function()
   {
      $(this).qtip(
      {
         content: '<div class="atention_box5"><div class="font13b">中心に2mm程度の白い隙間が生じます。</div><div class="space20"></div><div class="font13">ボードプレミアム A3Q は見開きでの印刷が不可能なため、片面ずつの印刷で製作を行っています。そのため、中心に2mm程度の白い隙間が生じます。中心に大事なイメージを配置されないよう、十分ご注意ください。<br /><br />ボードプレミアム A4 は見開きでの印刷が可能なため、中心線は生じません。</div><div class="space20"></div><div><img src="img/common/board_premium/atenntion1_pic3.jpg" width="383" height="216" /></div></div>'
        ,
         position: {
            corner: {
               target: 'topMiddle', // Position the tooltip above the link
               tooltip: 'bottomMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            } 
         },
         show: { 
            //when: 'click',
			show: 'mouseover',
            solo: true // Only show one tooltip at a time
         },
         hide: { when: { event: 'mouseout'}, delay: 0 },
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 1,
               radius: 4,
			   color: '#9cafbd'
            },
            name: 'light', // Use the default light style
            width: 650 // Set the tooltip width
         }
      })
   });
});