李明哲老師多媒體互動寫作教學: tooltipster 4.0版。超好用的tooltips模組。

tooltips互動技法之一

快速補充說明
｜tooltipster 互動技法

｜馬上對不清楚的地方進行說明

tooltipster這一互動模組，可以產生tooltips的互動模態。更重要的是，它有各式各樣的呈現變化，同時可以承載多媒體媒材，也可以是超連結互動內容。在使用上，簡單，可以行使在各種物件上。在調整上，也易於操作。

呈現樣態共有六種模式：

<a href='http://iamceege.github.io/tooltipster/#htmlcontentalt'
target='_blank'>click 到 tooltips網站</a>。shadow，top, slide，向右位移

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">

李明哲老師多媒體互動寫作教學

2017年8月23日星期三

tooltipster 4.0版。超好用的tooltips模組。

沒有留言:

張貼留言

2017年8月23日 星期三

tooltipster 4.0版。超好用的tooltips模組。

沒有留言:

張貼留言

2017年8月23日星期三