Universal jquery hover Cue box plug-in appears above the specified location

Work needs, the site hover alert box requirements appear above the specified element, because the workload modification is large so the requirements of the whole station general, so write a juqery plug-in, plug-in is very simple, you can change the style of their own.

Please reprint this article of friends must accompany the original link, thank you.

Original link: http://xuyran.blog.51cto.com/11641754/1876266

The plugin code is as follows:

Cue box plug-in;  (function  ($)  {    $.fn.tooltips = function  ( Options)  {        $.fn.tooltips.defaults = {             txt:  "",             left:  "",             width: "        }     "    var opts = $.extend ({}, $.fn.tooltips.defaults, options);         return this.each (function  ()  {              $this  = $ (this);              $this. CSS ({                 position:  "relative" &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;});              var elem =  ' < div class= "alert-box-small02" > '  + opts["txt"] +  ' </div> ';   // Append a hint box              $this to the object. Append (elem);             var boxwidth = parseint (opts[ "width"]);   //gets the default width of the cue box             var  thisWidth =  $this. Width ();             var divleft = opts["left"] ==  ""  ? -parseint (boxWidth -  Thiswidth)  / 2)  : opts["left"]; //if you do not have a value set, default center               $this. Find (". Alert-box-small02"). CSS ({                   bottom:  $this. Height ()  + 6,                 left: divLeft +  ' Px ',                 width:opts ["width"]            });              $this. Find (". Alert-box-small02"). Slidedown. Delay ("2000"). FadeOut ($);             settimeout (function  ()  {  //Removing the Cue box node                   $this. Find (". Alert-box-small02"). Remove ();            }, 2400)         });     }) (JQuery); 

CSS code:

. Alert-box-small02{line-height:35px;background:rgba (0,0,0,.8);p osition:absolute;height:35px;display:none;width : 180px;font-size:14px;font-weight:bold;color: #FFFFFF; text-align:center;border-radius:5px;padding:0 10px;bottom:0;z-index:888;}

Call Method:

$ (selector). ToolTips ({txt: "prompt box 2 test prompt box 2 test prompt box 2 test prompt box 2 test prompt Box 2 test", left: "0px"});

The effect is as follows:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/8A/A5/wKioL1g2p3vT1R9wAAAdcp9m8RM981.png "title=" 1.png " alt= "Wkiol1g2p3vt1r9waaadcp9m8rm981.png"/>

Universal jquery hover Cue box plug-in appears above the specified location