Membuat Tooltip untuk Form field | Buku Catatan si Ugi

Home › Blogs Tutorial › Tooltips › Membuat Tooltip untuk Form field




Description

Ini adalah form field tooltip (Tooltip untuk Form). Tooltip yang dapat ditampilkan ketika focus dalam form inputs pada sebuah form field.


Demo Form field tooltip


Letakan cursor pada form inputs, kemudian klik.

Nationality


Cara Memasang Form Field Tooltip:


  • Langkah Pertama:
Terlebih dahulu download 3 buah file berikut ini:
   1. form-field-tooltip.js
   2. rounded-corners.js
   3. form-field-tooltip.css
Kemudian Hosting, hingga hasilnya seperti berikut ini:
<link rel="stylesheet" href="https://sites.google.com/site/archivesiugi/javascr/form-field-tooltip.css" media="screen" type="text/css">
<script type="text/javascript" src="https://sites.google.com/site/archivesiugi/javascr/rounded-corners.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/archivesiugi/javascr/form-field-tooltip.js"></script>
Letakan 3 buah file tersebut dalam tag <head> template anda.

  • Langkah Kedua:
Menentukan Tooltip teks
Tooltip teks adalah sesuatu yang anda tambahkan secara manual ke dalam <input> atau <textarea> untuk menciptakan sebuah atribut (Text Tooltip), yang biasa anda pasang dalam tag <body>. Contoh:
<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">

  • Langkah Terakhir:
Menentukan Inisial
Tambahkan script berikut ini dibawah halaman anda,
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>

sumber: dhtmlgoodies

0 komentar:

Post a Comment



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan