javascript - Generating content from jQuery -


i working on jquery tooltip module personal use. in code i'm using jquery's mousemove , mouseout functions in order generate tooltip. however, when move mouse on element hits if statement in build function , says tooltip should there though can see in firebug , in chrome dev tools it's not. 

$.fn.tooltip = function(useroptions) {     var defaultoptions =    {                                 position: '',                                 follow: true                             };      var options = $.extend(defaultoptions, useroptions);      $(this).mouseenter(function()     {         var title = $(this).data('title');          build(title, options.position, options.follow);          var top, left;          var tooltip = $('#tooltip');          if (tooltip.hasclass('top'))         {             top = $(this).offset().top - ($(this).height() * 2) - 10;             left = $(this).offset().left;         }          else if (tooltip.hasclass('right'))         {             top = $(this).offset().top - ($(this).height() / 2);             left = $(this).offset().left + tooltip.width();          }          else if (tooltip.hasclass('bottom'))         {             top = $(this).offset().top + $(this).height() + 10;             left = $(this).offset().left;         }          else if (tooltip.hasclass('left'))         {             top = $(this).offset().top - ($(this).height() / 2);             left = $(this).offset().left - (tooltip.width() * 1.5);         }          tooltip.css('top', top).css('left', left).show();      });      $(this).mousemove(function(e)     {         if (options.position === "" || options.position === undefined || options.follow === true)         {             var title = $(this).data('title');              build(title, options.position, options.follow);              var top = e.pagey + 25;             var left = e.pagex + 10;              $('#tooltip').css('top', top).css('left', left).show();         }     });      $(this).mouseout(function()     {         $('#tooltip').hide();     });      function build(title, position, follow)     {         if ($('#tooltip'))         {             console.log("the tooltiop should on page.");             $('#tooltip-content > p').text = title;         }          else         {             console.log("position is: " + position);              var markup  = '<div id="tooltip" class=' + position + '">';                 markup += '<div id="tooltip-content">';                 markup += '<p>' + title + '</p>';                 markup += '<span id="tooltip-arrow"></span>';                 markup += '</div>';                 markup += '</div>';              $('body').append(markup);         }     } };

the original goal create tooltip first time user moves on element , when mouse moves away wanted hide tooltip , move out of way until it's needed again. that's why i'm checking see if exists in build function. know i'm overlooking something, can't figure out is. suggestions?

in build function change check in if like:

if ($('#tooltip').lenght) {

that return false if #tooltip not yet appended body , true if is. $('#tooltip') return jquery object never false length 0, false, if tooltip element not yet added body.

jsfiddle

regards.


Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more