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 則留言: