快速補充資訊的tooltips（二）：圖文格式

Tooltips這種模式的互動機制，在於速迅的為某一文本媒材增加補充「小額量的」訊息。
這次使用的Tooltipster模組，可以快速的形成「圖、文式」的補充資料。作法很簡單。

黑格爾的《小邏輯》開始讀出味道之後，居然是一種苦讀的心情在催促著自己，彷 若重回高三要拼聯考的時光。是什麼力量呢？一種「理性」思維的動 力，燒起那團團的熱情之火。很難想像，那麼嚴格的邏輯的推論之文，倒是一字一字地鼓風起火焰之燃。這是黑格爾的力道。一種用理性撼動人的力道。《小邏 輯》是談「本體論」的「邏輯」。邏輯被他談得是一種具體性的生命過程之邏輯。

jQuery 程式碼：

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

<script>
$(document).ready(function() {
$('#id061201').tooltipster({
content: $('<span><img style="width: 192px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Zkt8ndff6A-3c_paUCltv39pPTPbMKKI8hKfej3XwQvsLvQsQnEriEGO_vlYZPxdM0L2Wo2QzfC-ShZBhgjYKNTYKz733BxOVm1McdH1j-dvocg3enE7od0SuRccsi_MXP430gvFaJg/w278-h302-no/" /> <br><strong>黑格爾及其 《小邏輯》一書。</strong></span>'),
position: 'left',
offsetX:0 ,
offsetY: 30
});
});
</script>

語法說明：
一、要被滑入的物件，記得要設id。綠色字體者。
二、請寫入圖像網址、大小以及圖說。紅色字體者。
三、設定tooltips出現的位置以及位移的量（正、負數字）。藍色字體者。

四、位置有八種：right, left, top, top-right, top-left, bottom, bottom-right, bottom-left 。

影音教學：






更 多tooltips的教學內容：

一、快速補充資訊的tooltips（一）：通用格式 ，clikc here。
二、小額資訊量的快速互動補充：純CSS互動範例，click here。
三、超快速、好用的補充說明互動法：Hint.css Tooltips，click here。