Share on Facebook Share on Twitter

Fancy tooltips with an “arrow” pointer are commonly found in desktop applications. Well, now you can add a similarly looking tooltip to your webpage. Works in IE4+, NS6+, Firefox 3+, Safari, and Opera 7+. Note that the pointer image disappears if the tooltip is too close to the edges of the browser window.

Installation:
Step 1: Insert the following stylesheet into the <head> section of your page:

Step 2: Insert the below code into the <body> section of your page, outside any other tags, especially relatively or absolutely positioned elements:

 

Step 3: The script uses a pointer image. Download the below:

DHTML Tooltips Arrow2 (right click image, and select “Save As”).

Note that you can use your own custom image in place of the above if you wish.
Step 4: Finally, add the following inside any link or element that will contain a tooltip:

Example:  Link: A Href Tag

In DIV tag:

Demo:http://demo.bienthuy.com/html/dhtml-tooltip/

Other Posts you may be interested in:

  1. Automatically deleting cache folder using PHP & Cron Jobs
  2. Cách cài đặt Ccleaner để dọn rác máy tính – Phần 3
  3. Hướng dẫn sửa lỗi font chữ tiếng Việt trong Microsoft Excel và Microsoft Word
  4. Cách xử lý khi bị kiến ba khoang đốt
  5. Fix “Microsoft excel cannot open or save any more documents…”
  6. Làm thế nào để boot vào Safe Mode trong windows 10?
  7. Cách lập bàn thờ phật tại nhà

Last updated on September 9th, 2014 at 03:46 pm

What do you think?

x
This website is using cookies. More info. That's Fine