Message prompt box special effect based on jQueryTipso plugin _ jquery-js tutorial

This article describes how to implement message prompt box effects based on the jQueryTipso plug-in, which has some reference value, if you are interested, you can refer to the implementation of the message prompt Box Based on the jQuery Tipso plug-in. This feature allows you to define the display position of the prompt box and dynamically change the prompt content of the prompt box, it should be said that it is a quite flexible jQuery message prompt box plug-in for your reference, the specific content is as follows

Online Demo Source code download

Implementation Code:

 
1. Default
Tipso
 
 
2. display on the left
Tipso
 
 
3. Background Color
Tipso
 
 
4. Use the title attribute
Tipso
 
 
5. Click Show/hide
Tipso
Display
  
 
 
6. Update content
Tipso
    Update
  
 
 
7. Use on Images
     
 
 
8. Callback Function
Tipso
Status:
  
 

Js Code:

$ (Function () {// 1 $ ('# tip1 '). tipso ({useTitle: false}); // 2 $ ('# tip2 '). tipso ({useTitle: false, position: 'left'}); // 3 $ ('# tip3 '). tipso ({useTitle: false, background: 'tomato'}); // 4 $ ('# tip4 '). tipso (); // 5 $ ('# tip5 '). tipso ({useTitle: false}); $ ('# btn5 '). on ({click: function (e) {if ($ (this ). text () = 'display') {$ (this ). text ('hiding '); $ (' # tip5 '). tipso ('show');} else {$ (this ). text ('display'); $ ('# tip5 '). tipso ('hide ');} e. preventDefault () ;}}); // 6 $ ('# tip6 '). tipso ({useTitle: false}); $ ('# btn6 '). on ('click', function () {var $ val = $ (this ). prev (). val (); if ($ val) {$ ('# tip6 '). tipso ('update', 'content', $ val) ;}}); // 7 $ ('# tip7 '). tipso ({useTitle: false}); // 8 $ ('# tip8 '). tipso ({useTitle: false, onBeforeShow: function () {detail ('{status'}.html ('beforeshow ') ;}, onShow: function () {detail ('{status'}.html ('show');}, onHide: function () {('{status'}.html ('hide ');}});});

The above is all the content of this article, hoping to help you learn.