*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2015年6月6日 星期六

快速補充資訊的tooltips(一):通用格式



互動的功能之一,在於快速補充資訊。tooltips這種功能,是常用的技法。學會使用這一互動模組, 可以有多種的變化形式來處理資訊補充的方式。這次是使用Tooltipster這 一互動模組。




這是DIV裡面的內容,可以是文 字、 圖像、 影音和所有html的格式資訊。

這是圖像的tooltips說明。
這是表格TD裡面的資訊。表格的格子內容也可 以使用 tooltips。
表格文字居中。



通用式範例一的快速 語法表:
DIV
<div  class="tooltipsa1" title="這是通用式的tooltip說明。"  ...> xxx</div>
圖像
<img  class="tooltipsa1" title="可以重覆使用在很多地方。"  .../>
表格格子
<td  class="tooltipsa1" title="而且呈現的格式都相同。"  ...> xxx</td>
表格本身
<tabel class="tooltipsa1" title="這個表格本身的說明。"  ...> xxx</table>
youtube影音
<iframe class="tooltipsa1" title="youtube影音,即iframe,也可以用。"  ...> </table>



教學影音:




共用的必要程 式碼,請置於<body>之後:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/css/tooltipster.css">
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/js/jquery.tooltipster.min.js"></script>




通用範例一的CSS以及 jQuery,請放置於<body>之後:
<style>
/* 創製自己的class,取名為 "my-theme01" */
.my-theme01 {
border-radius: 5px;
border: 2px solid #000;
background: #4c4c4c;
color: white;
}
/* 使用這個設定進一步更改文字細節 */
.my-theme01 .tooltipster-content {
font-family: Arial, '新細明體';
font-size: 15px;
line-height: 16px;
padding: 8px 10px;
letter-spacing: 0.1em;
}
</style>

<script>
$(document).ready(function() {
$('.tooltipsa1').tooltipster(
{
position: 'top',
theme: 'my-theme01'
});
});
</script>

使用說明:
一、可以調整tooltips的出現位置,即position:,改藍色字體處,共有right, left, top, top-right, top-left, bottom, bottom-right, bottom-left,共八個位置。
通用範例二的CSS以及 jQuery,請放置於<body>之後:
<style>
/* 創製自己的class,取名為 "my-theme02" */
.my-theme02 {
border-radius: 5px;
border: 2px solid gray;
background: #93FF93;
color: red;
}
/* 使用這個設定進一步更改文字細節 */
.my-theme02 .tooltipster-content {
font-family: Arial, '新細明體';
font-size: 15px;
line-height: 16px;
padding: 8px 10px;
letter-spacing: 0.1em;
}
</style>

<script>
$(document).ready(function() {
$('.tooltipsa2').tooltipster(
{
position: 'left',
theme: 'my-theme02'
});
});
</script>








2 則留言: