JavaScript floating location prompt effect implementation code _ javascript skills

Originally, we wanted to implement a tooltips effect of a set of floating positioning and mouse following. However, we found that the positioning and mouse following are still different in some key areas. Let's separate them. Originally, we wanted to implement a tooltips effect of a set of floating positioning and mouse following. However, we found that the positioning and mouse following are still different in some key areas. Let's separate them.

This effect is not very difficult in itself. It mainly takes some effort in program structure and expansion to make it easier to use and use it in more places.
Program features
1. When the same prompt box is used for multiple trigger elements, only one instance is needed;
2. Click and trigger modes are selected for display and hide respectively;
3. latency display and hiding can be set;
4. There are 25 preset positioning positions;
5. You can customize Positioning Based on preset positioning;
6. You can set adaptive window positioning;
Program description
Tip object]
The Tip object is the container used to display the prompt information, which is represented by the Tip property. There is no requirement for this. The program will perform some settings during initialization.
First, perform the following settings:

var css = this._cssTip; css.margin = 0; css.position = "absolute"; css.visibility = "hidden"; css.display = "block"; css.zIndex = 99; css.left = this._cssTip.top = "-9999px";

Here, margin is set to 0 to avoid some locating problems. visibility is used to hide it instead of display because the program needs to obtain the offsetWidth and offsetHeight of the Tip, you also need to set left and top to avoid the scroll bars that appear due to the position occupied by the Tip.
Because Tip may be included in other positioning elements, you need to set two offset Correction parameters:

var iLeft = 0, iTop = 0, p = this.Tip; while (p.offsetParent) { p = p.offsetParent; iLeft += p.offsetLeft; iTop += p.offsetTop; }; this._offsetleft = iLeft; this._offsettop = iTop;

Add an event to the mouseover of the Tip.
[Trigger object]
In many cases, a Tip corresponds to multiple prompts, so the program adds an Add Method Based on the Table sorting method.
After a Tip is instantiated, you can use the Add method to Add trigger objects to multiple trigger elements. The _ trigger attribute is used in the program to indicate the current trigger object.
A required parameter of the Add method is the trigger element, that is, the element that triggers the display Tip.
You can also use the options parameter to customize the attributes of the trigger object, including:
Attribute: Default Value // description

ShowType: "both", // display mode HideType: "both", // hide mode ShowDelayType: "touch", // display delay mode HideDelayType: "touch ", // hide the delay mode ShowDelay: 300, // display the delay time HideDelay: 300, // hide the delay time Fixed :{}, // locate the object onShow: function (){}, // execute onHide: function () {}// hide when displaying

You can modify these default values during program initialization.
A classic application modifies the Tip to the corresponding content of each trigger object in onShow.
In addition, the Elem attribute saves the trigger element.
Show and hide]
The focus of the prompt effect is to display and hide the prompt information. The program displays and hides the Tip by setting whether the visibility of the Tip is hidden.
The specific Show and Hide Programs are included in the Show and Hide Programs, as well as the ReadyShow and ReadyHide programs, which are mainly used to handle latency.
One feature of this Tip effect is that when you move the mouse over the Tip, it will remain displayed.
To achieve this effect, write a program to the Tip mouseover:
This. Check (e. relatedTarget) & clearTimeout (this. _ timer );
The Check program is used to determine whether relatedTarget is an external element, that is, whether the elements left by the mouse are external elements.
If it is an external element, it indicates that it is currently a hidden delay phase. You only need to clear the timer to cancel the hidden phase.
The external element here refers to the trigger element and the element other than the Tip object itself and its internal element.
This is a bit difficult to understand. Let's see how the Check program judges:

return !this._trigger || !( this.Tip === elem || this._trigger.Elem === elem || Contains(this.Tip, elem) || Contains(this._trigger.Elem, elem) );

First, determine whether the _ trigger exists. If it does not exist, it indicates that it is triggered at the beginning, or as an external trigger.
If it exists, determine whether the transmitted element is a Tip or trigger element, and then use Contains to determine whether it is inside the Tip or trigger element.
Ps: For details about Contains, refer to the comparison document here.
In this way, the internal element is determined, and the inverse is to determine whether the external element is determined.
Click Mode]
Click Display means that the Tip is displayed when the trigger element is clicked.
In the Add program, the following program is bound to the click Event of the trigger element:

addEvent(elem, "click", BindAsEventListener(this, function(e){ if ( this.IsClick(trigger.ShowType) ) { if ( this.CheckShow(trigger) ) { this.ReadyShow(this.IsClick(trigger.ShowDelayType)); } else { clearTimeout(this._timer); }; }; }));

First, you can use ClickShow to determine whether to click the display, and then use CheckShow to check whether the same trigger object exists.
The CheckShow program is as follows:

if (trigger !== this._trigger) { this.Hide(); this._trigger = trigger; return true; } else { return false; };

If it is not the same trigger object, execute Hide to clear the previous trigger object to prevent conflicts, and then execute ReadyShow to display it.
If it is the same trigger object, it indicates that the current delay is hidden, and the timer is cleared to maintain the display status.
Click mode hiding means to hide the Tip when you click an external element.
In ReadyShow, when hidden by clicking, _ fCH is bound to the click Event of the document:
This. IsTouch (trigger. HideType) & addEvent (this. _ trigger. Elem, "mouseout", this. _ fTH );
Note that the hidden binding event should be put in ReadyShow, rather than Show, because the hidden event may be triggered when the delay is not displayed.
_ FCH is an attribute defined during initialization. It is used to add and remove click-hide events:

this._fCH = BindAsEventListener(this, function(e) { if (this.Check(e.target) && this.CheckHide()) { this.ReadyHide(this.IsClick(this._trigger.HideDelayType)); }; });

Links are different from click-through display. It is determined that the file is hidden and you must first determine whether e.tar get is an external element.
Here, CheckHide is used to check whether the Tip is hidden:

if (this._cssTip.visibility === "hidden") { clearTimeout(this._timer); removeEvent(this._trigger.Elem, "mouseout", this._fTH); this._trigger = null; removeEvent(document, "click", this._fCH); return false; } else { return true; };

If it is a hidden state, clear the timer to remove the event and do not need to execute Hide again.
[Trigger method]
The trigger method is for mouseover and mouseout, and the process is similar to the click method.
The trigger mode displays the Tip when the mouse moves from the external element to the trigger element (trigger mouseover.
The Add program binds the following program to the mouseover event of the trigger element:

addEvent(elem, "mouseover", BindAsEventListener(this, function(e){ if ( this.IsTouch(trigger.ShowType) ) { if (this.CheckShow(trigger)) { this.ReadyShow(this.IsTouch(trigger.ShowDelayType)); } else if (this.Check(e.relatedTarget)) { clearTimeout(this._timer); }; }; }));

Similar to the click method, you also need to execute a CheckShow command. However, Check is also used to determine whether e. relatedTarget is an external object.
This is because mouseover may be triggered by entering from the internal elements of the trigger element (including the Tip) or bubbling of the internal element, which does not require any operation.
Correspondingly, trigger mode hiding means that the mouse hides the Tip when the trigger element or Tip leaves.
When TouchHide is true, _ fTH is bound to the mouseout event that triggers the element during ReadyShow:
This. IsTouch (trigger. HideType) & addEvent (this. _ trigger. Elem, "mouseout", this. _ fTH );
Bind to the Tip mouseout during Show:
This. IsClick (trigger. HideType) & addEvent (document, "click", this. _ fCH );
The reason for binding to ReadyShow is the same as that for the above reason, and the Tip is bound only when it is displayed.
_ FTH is similar to _ fCH and is also an attribute defined during initialization. It is used to add and remove hidden events to trigger the event:

this._fTH = BindAsEventListener(this, function(e) { if (this.Check(e.relatedTarget) && this.CheckHide()) { this.ReadyHide(this.IsTouch(this._trigger.HideDelayType)); }; });

The difference is that mouseout uses e. relatedTarget for Check.
[Trigger principle]
The above describes the process of triggering the display and hiding from the perspective of the program, but a detailed analysis is required to truly understand it.
The following flowchart uses the trigger mode to show hidden information:
First, insert iframe during initialization:

Var iframe = document. createElement (""); Document. body. insertBefore (iframe, document. body. childNodes [0]); this. _ cssiframe = iframe. style; </pre> <p> when you Show, set the style by referring to Tip and then display: </p> <pre class = "brush: js; toolbar: false "> var css = this. _ cssiframe; css. width = this. tip. offsetWidth + "px"; css. height = this. tip. offsetHeight + "px"; css. left = iLeft + "px"; css. top = iTop + "px"; css. display = ""; </pre> <p class = "codebody"> it is actually placed under the Tip. <Br/> you can hide it when hiding it. <Br/> usage <br/> During instantiation, the first required parameter is the Tip object: <br/> var ft = new FixedTips ("idTip "); <br/> the second optional parameter is used to set the unified default value of the trigger object attribute. <Br/> then Add the trigger object using the Add method: <br/> var trigger1 = ft. add ("idTrigger1"); <br/> the second optional parameter is used to set the attributes of the trigger object. <Br/> to Add multiple trigger objects, you only need to Add them with Add. <Br/> program source code </p> <pre class = "brush: js; toolbar: false"> var FixedTips = function (tip, options) {this. tip =$ $ (tip); // prompt box this. _ trigger = null; // trigger object this. _ timer = null; // timer this. _ cssTip = this. tip. style; // simplify the code this. _ onshow = false; // record the current display status this. setOptions (options); // process the Tip object var css = this. _ cssTip; css. margin = 0; // avoid locating the problem css. position = "absolute"; css. visibility = "hidden"; css. display = "block"; cs S. zIndex = 99; css. left = this. _ cssTip. top = "-9999px"; // prevents scroll bars from occupying space. // The offset Correction parameter var iLeft = 0, iTop = 0, p = this. tip; while (p. offsetParent) {p = p. offsetParent; iLeft + = p. offsetLeft; iTop + = p. offsetTop;}; this. _ offsetleft = iLeft; this. _ offsettop = iTop; // The addEvent (this. tip, "mouseover", BindAsEventListener (this, function (e) {// If an external element enters, it indicates that the latency is currently hidden, then clear the timer to cancel hiding this. check (e. re LatedTarget) & clearTimeout (this. _ timer) ;})); // ie6 processes select if (isIE6) {var iframe = document. createElement ("<iframe style = & #39; position: absolute; filter: alpha (opacity = 0); display: none; & amp; #39;>"); document. body. insertBefore (iframe, document. body. childNodes [0]); this. _ cssiframe = iframe. style ;}; // used to hide this. _ fCH = BindAsEventListener (this, function (e) {if (this.Check(e.tar get) & this. checkHid E () {this. readyHide (this. isClick (this. _ trigger. hideDelayType) ;};}); // used to hide this. _ fTH = BindAsEventListener (this, function (e) {if (this. check (e. relatedTarget) & this. checkHide () {this. readyHide (this. isTouch (this. _ trigger. hideDelayType) ;};};}; FixedTips. prototype = {// set the default property SetOptions: function (options) {this. options = {// ShowType: "both" by default, // display mode HideType: "both", // hide ShowD ElayType: "touch", // display delay mode HideDelayType: "touch", // hide latency mode // "click": click only, "touch": trigger only, "both": both use, "none": Do not use ShowDelay: 300, // display Delay Time HideDelay: 300, // hide delay time Fixed :{}, // locate the onShow: function () {}, // when displaying, execute onHide: function () {}// when hiding}; Extend (this. options, options | |{}) ;}, // Check the trigger Element Check: function (elem) {// returns whether an external element (that is, the trigger element and the element object other than the Tip object itself and its internal element) return! This. _ trigger |! (This. tip === elem | this. _ trigger. elem = elem | Contains (this. tip, elem) | Contains (this. _ trigger. elem, elem) ;}, // prepare to display ReadyShow: function (delay) {clearTimeout (this. _ timer); var trigger = this. _ trigger; // hide this. isTouch (trigger. hideType) & addEvent (this. _ trigger. elem, "mouseout", this. _ fTH); // click to hide this. isClick (trigger. hideType) & addEvent (document, "click", this. _ fCH); // display if (Delay) {this. _ timer = setTimeout (Bind (this, this. show), trigger. showDelay);} else {this. show () ;}}, // display Show: function () {clearTimeout (this. _ timer); this. _ trigger. onShow (); // put it in front to easily modify attributes. // calculate left and top var trigger = this based on preset positioning and custom positioning. _ trigger, pos = GetRelative (trigger. elem, this. tip, trigger. fixed), iLeft = pos. left, iTop = pos. top; // set the position and display this. _ cssTip. left = iLeft-this. _ offsetleft + "px "; This. _ cssTip. top = iTop-this. _ offsettop + "px"; this. _ cssTip. visibility = "visible"; // ie6 processes select if (isIE6) {var css = this. _ cssiframe; css. width = this. tip. offsetWidth + "px"; css. height = this. tip. offsetHeight + "px"; css. left = iLeft + "px"; css. top = iTop + "px"; css. display = "" ;}; // hide this. isTouch (trigger. hideType) & addEvent (this. tip, "mouseout", this. _ fTH) ;}, // prepare to hide ReadyHi De: function (delay) {clearTimeout (this. _ timer); if (delay) {this. _ timer = setTimeout (Bind (this, this. hide), this. _ trigger. hideDelay);} else {this. hide () ;};}, // Hide: function () {clearTimeout (this. _ timer); // set to hide this. _ cssTip. visibility = "hidden"; this. _ cssTip. left = this. _ cssTip. top = "-9999px"; // ie6 processes select if (isIE6) {this. _ cssiframe. display = "none" ;}; // process the trigger object if (!! This. _ trigger) {this. _ trigger. onHide (); removeEvent (this. _ trigger. elem, "mouseout", this. _ fTH);} this. _ trigger = null; // remove event removeEvent (this. tip, "mouseout", this. _ fTH); removeEvent (document, "click", this. _ fCH) ;}, // Add the trigger object Add: function (elem, options) {// create a trigger object var elem =$ (elem ), trigger = Extend ({Elem: elem}, this. options), options | {}); // click to display addEvent (elem, "click", B IndAsEventListener (this, function (e) {if (this. isClick (trigger. showType) {if (this. checkShow (trigger) {this. readyShow (this. isClick (trigger. showDelayType);} else {clearTimeout (this. _ timer) ;};};}); // display addEvent (elem, "mouseover", BindAsEventListener (this, function (e) {if (this. isTouch (trigger. showType) {if (this. checkShow (trigger) {this. readyShow (this. isTouch (trigger. showDe LayType);} else if (this. check (e. relatedTarget) {clearTimeout (this. _ timer) ;};};}); // return the trigger object return trigger ;}, // display check CheckShow: function (trigger) {if (trigger! = This. _ trigger) {// if it is not the same trigger object, execute Hide to prevent conflict this. hide (); this. _ trigger = trigger; return true;} else {return false ;}}, // hide check CheckHide: function () {if (this. _ cssTip. visibility = "hidden") {// It is a hidden state. You do not need to execute Hide clearTimeout (this. _ timer); removeEvent (this. _ trigger. elem, "mouseout", this. _ fTH); this. _ trigger = null; removeEvent (document, "click", this. _ fCH); return false;} else {return true ;}}, // whether to click IsClick: function (type) {type = type. toLowerCase (); return type = "both" | type = "click" ;}, // method of triggering IsTouch: function (type) {type = type. toLowerCase (); return type = "both" | type = "touch" ;}}; </pre>