tooltips互動
技法之一
快速補充說明
｜tooltipster 互動技法
｜tooltipster 互動技法
｜馬上對不清楚的地方進行說明
tooltipster這一互動模組，可以產生tooltips的互動模態。更重要的是，它
有各式各樣的呈現變化，同時可
以承載多媒體媒材，也可以是超連結互動內容。在
使用上，簡單，可以行使在各種物件上。在調整上，也易於操作。
呈現樣態共有六種模式：
tooltipster的互動效果，可以作用於各式媒材，或編輯元素（elements），例如img、span、div、table、td、 iframe等等。操作方法便利。
| 設置方法 |
一、請在<head>xxx< /head>之間（建議）或<body>之後，置入下列 jquery & CSS程式碼：
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/js/tooltipster.bundle.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/tooltipster.bundle.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css">
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmc201708/tooltipster-master/tooltipster-master/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min.css">
二、請在<head>xxx< /head>之間或<body>之後，置入一列驅動程式碼（預設款）：
<script>
$(document).ready(function() {
$('.tooltipster').tooltipster();
});
</script>
三、為編輯元素設置互動，以span為例：
這是用span包圍起來的文字。
語法：
<span style="text-decoration: underline;" title="這是基本預設款式" class="tooltipster">這是用span包圍起 來的文字。</span>
說明：
1. 只要在span裡面，加入有啟動tooltipster功能的 class，此例為tooltipster。再於 title 裡面加入文字；那文字就是會跑出來的文字。
2. 基本款，其呈現位置會視狀況自行調整。
| 設置變化款式 |
一、同前例，如已設，則省略。
二、設置各種款項的驅動程式，< head>xx<head>之間或<body>之後，此例為筆者設定第一款式：
<script>
$(document).ready(function() {
$('.tps20170822a').tooltipster({
side:['left'], //出現的位置，有 left, right, top, bottom 這四選項。
animation: 'fall', //出現動作模式，有 'fade','grow','swing','slide','fall' 這五種選項。
theme: 'tooltipster-punk', //設定的款式，有五種，請看下方說明。
functionPosition: function(instance, helper, position){ //可設定出現的位移位置。
position.coord.top += 0;
position.coord.left += 0;
return position;
}
});
});
</script>
三、為元素設定互動，以圖片為例：
語法：
<img style="width: 240px; height: 160px;" title="第一變化款式樣態" class="tps20170822a" alt="" src="https://c1.staticflickr.com/3/2942/34049661985_07e951a0de_b.jpg">
說明：
可設定的款式共有五款，分別為：tooltipster-light, tooltipster-borderless, tooltipster-punk, tooltipster-noir, tooltipster-shadow 。
四、其他筆者所設定樣態，第二款式noir：
請copy驅動程式碼，放到<head> xxx</head>之間或<body>之後：
<script>
$(document).ready(function() {
$('.tps20170822b').tooltipster({
side:['top'],
animation: 'swing',
theme: 'tooltipster-noir',
functionPosition: function(instance, helper, position){
position.coord.top += 0;
position.coord.left += 0;
return position;
}
});
});
</script>
這是DIV。請移到這樣
來看tooltipster效果。
語法：
<div title="筆者自設第二款式效果" class="divexa20170822a tps20170822b">這是DIV。請移到這樣來看 tooltipster效果。</div>
| 可超連結款式 |
請copy驅動程式碼，放到<head> xxx</head>之間或<body>之後：
<script>
$(document).ready(function() {
$('.tps20170822d').tooltipster({
side:['top'],
animation: 'slide',
interactive: true, //這一行，啟動滑鼠可上移到內容並click的功能。
contentAsHTML: true, //這二行，啟動title的內文可是超連結文字的功能
theme: 'tooltipster-shadow',
functionPosition: function(instance, helper, position){ //此例設定了位移，向左位移90px
position.coord.top += 0;
position.coord.left += 90;
return position;
}
});
});
</script>
 |
 |
這是表格。 也可設定在格子TD。 夏日。 陽明山。 綠色。 |
語法：
<table style="text-align: left; width: 100%;"
title="<a href='http://lmcsilver.blogspot.tw/' target='_blank'>可超連結影像blog</a>，同
時位移的樣態。"
class="tps20170822d" border="0" cellpadding="0" cellspacing="3">
<tbody>
<tr>
<td style="vertical-align: top; width: 33%;"><img
style="width: 187px; height: 125px;" alt=""
src="https://c1.staticflickr.com/3/2916/33771841862_c226ef38b6_b.jpg"><br>
</td>
<td style="vertical-align: top; width: 33%;"><img
style="width: 187px; height: 125px;" alt=""
src="https://c1.staticflickr.com/5/4227/34898664156_5eecb5299a_b.jpg"><br>
</td>
<td style="vertical-align: top; text-align: right;">這是表格。<br>
<br>
夏日。<br>
陽明山。<br>
<br>
綠色。<br>
<br>
</td>
</tr>
</tbody>
</table>
說明：
有超連結的內容設定較為複雜一點點，還請看下面的影音教學。
影音說明範例，將 " 符號都改為 ' 這符號：
<a href=' http://lmcsilver.blogspot.tw/ ' target='_blank'>可超連結影像blog</a>，同
時位移的樣態。
| 圖文整合款式 |
★注意：使用data-tooltip-content
取代上面的 title |
設置思路：
- 請設置一個小型DIV，把圖文以及影音，都放在DIV內。最後tooltip出現的就是這個DIV。
- 在這DIV的前後加上有id的span，<span id="idname">XXX</span>。因為這個模組是如此要求的。
- 置入驅動程式碼。
- 在設定的互動的媒材，這次要用data-tooltip-content="#idname"，而不是上面所用的 title="xxx"。
- 最後，使用display:none; 使得先寫好的DIV，消失於版面上。
一、小型DIV，加上 span，給span設立 id ，範例。DIV裡面可以加入任何元素以及互動、超連結。
師大夜市總是人潮如海，
讓人懷念的小吃，很多。
語法：
<span id="tpcontenta01">
<div style="width: 258px;"><img style="width: 92px; height: 61px;" alt="" src="https://c2.staticflickr.com/9/8543/29065885441_ff2503ac7e_b.jpg" align="left"> <span style="font-weight: bold;">師大夜市</span><br> 總是人潮如海，<br> 讓人懷念的小吃，很多。<br></div>
</span>
二、設置驅動程式碼， <head>xxx</head>之間或<body>之後：
<script>
$(document).ready(function() {
$('.tps20170822e').tooltipster({
side:['top'],
animation: 'fall',
theme: 'tooltipster-light',
interactive: true, //這一行，啟動滑鼠可上移到內容並click的功能。
functionPosition: function(instance, helper, position){ //設定向右偏移了90px
position.coord.top += 0;
position.coord.left += 90;
return position;
}
});
});
</script>
三、為媒材設立互動機 制，注意，使用 data-tooltip-content ，而不是 title ：
晚上，散步的師大夜市， 一樣的味道，不一樣的嘈吵。
語法：
<span style="text-decoration: underline; font-weight: bold; font-style: italic;" data-tooltip-content="#tpcontenta01" class="tps20170822e">散步的師大夜市</span>
注意技巧：
data-tooltip-content="#xxx" ，那個「 # 」字符號，即id的符號，一定要加進去。
四、把第一步聚所設置的 小DIV，在版面上藏起來。
在小DIV（包含span）外層再加上一個DIV，然後設立 style="display: non;" 使得加上的外層DIV在版面上消失。例如：
<div style="display: none;">
<span id="tpcontenta01">
<div style="width: 258px;">
內容
</div>
</span>
</div>
如果圖文整合款式，有做了很多個，都可以把所做的小DIV，一起藏在這個要消失的DIV裡面。
| 使用click方式 |
★你可以使用click來取代hover，例如純影音的內
容時 |
構思方式：
- 設置方式和上例，圖文整合款示，相同。設立一個小DIV，再外加上有id 的span 。
- 驅動程式碼的內容設定，有一個增加功能，啟動Click，請看範例。
- 使用click，而不是如之前的hover，來啟動tooltips。
一、驅動程式碼：
<script>
$(document).ready(function() {
$('.tps20170822f').tooltipster({
side:['right'],
animation: 'swing',
theme: 'tooltipster-noir',
interactive: true, //這一行，啟動滑鼠可上移到內容並click的功能。
trigger: 'click', //這一行，將以click來啟動功能。
functionPosition: function(instance, helper, position){
position.coord.top += 0;
position.coord.left += 0;
return position;
}
});
});
</script>
二、範例，請按圖片（這次是click，不是hover）：
臉色！諸佛也有臉色嗎？
俯看世間的眼，
是一種深沈的人性。
← click image !!
語法：
<img style="width: 180px; height: 120px;" data-tooltip-content="#show02a" class="tps20170822f" alt="" src="https://farm1.staticflickr.com/717/31964606043_17ca856b39_o.jpg" align="left">
