How can i set the content of my infowindow inside the map canvas

Question

My code on mouseover of the marker is shown below.

  events:{
  mouseover: function(marker, event, context){
      $(this).gmap3(
        {clear:"overlay"},
        {
          overlay:{
              latLng: marker.getPosition(),
              options:{
                  content:  "<span class='infobubble_content'><div class='infobubble infobulle"+(context.data ? " drive" : "")+"'><div class='infobubble_wrap'><div class='close_popup' onclick = 'clearmap();'>x</div><div class='infobubble_event_text'>" +
                  "<a href='"+appUrl+"/events/"+context.data.eventid+"'><div class='infobubble_event_names'>" + context.data.title + "</div></a>" +
                  "<div class='infobubble_event_date'>" + context.data.date +"</div>" +
                  "<div class='infobubble_event_venue'>" + context.data.venue + "</div>" +
                  "</div><div class='infobubble_event_image'><img src=" + context.data.img + "></img></div>" +
                  "<div class='clear'></div>"+"<a href="+appUrl+'/events/'+context.data.eventid+"><div class='more_map'>more details</div></a>"+"</div></div></span>",
                  offset: {
                    x:-46,
                    y:-73
                  }
              }
          }
        });
  }

My issue is that some part of the infowindow is getting hidden when i scroll my map to the boundary or if the marker is near to the boundary of canvas. I need to fit the infowindow inside my map canvas. Can anyone please help.