Position
tag where clicked

Question

I've been trying to position a <div> element where I click.

This is the div that I want to position

<main class="">
    <div class="overlay"></div>
    @Html.Raw(ViewBag.Breadcrumb)
    <div class="split">
        <div class="half">
            <div class="section-head">
                <i class="section-icon fa fa-calendar"></i>
                <h2>mon Calendrier</h2>
                <small>Dates à retenir</small>
            </div>
            <div class="calendar-container">
                <!-- CALENDAR -->
                <div class="action-calendar"></div>
                <!-- TOOLTIP -->
                <div class="tooltip-wrapper">
                    <div class = "day-event">
                        <span class="title"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

This is binded to an event on a calendar (if I have a date which has an event associated with it). What I want to obtain is , as soon as I click on a date I want this <div> to be placed where the mouse was clicked.

Found this in my search for something that could help me [How do I position a div next to a mouse click using JQuery? but it didn't helped me. The div was changing position but not even close on where I clicked.

This is the code that should do the trick:

var tooltip_HTML = $(".day-event .title").html();
var position = $(".action-calendar a.ui-state-active").parent().offset();
$(".tooltip-wrapper").css({ top: position.top, left: position.left })

THE CSS

.tooltip-wrapper .title{
    color:#ffffff; 
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.tooltip-wrapper{
    position: absolute; 
    z-index: 2000;
    width: 100%
}

.tooltip-wrapper .day-event {
    background: #000000; 
    position: relative; 
    width:250px;
    color: #FFFFFF;
    /*height: 100px;*/ 
    line-height: 20px;
    text-align: center;  
    border-radius: 10px;
    opacity: 0.9;
    filter: Alpha(opacity=90);
    z-index: 10000;
}

.tooltip-wrapper span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; 
  height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

The thing is that it changes the position but not where it suppose.

Thank you.

Looks like `event.pageY` and `event.pageX` should be `e.pageY` and `e.pageX` — , Jun 30 '16 at 20:53

score 2 · Answer 1 · answered Jun 30 '16 at 21:03

Theevent.pageX and event.pageY gets you the horizontal and vertical position of the mouse with respect to the uppermost left part of the page. When you're setting position: absolute. It's top and left value will get set with respect to it's relative parent container.

Thus your getting the wrong coordinates. To fix this, you have to set the parent container just after the <body> and set it's width: 100%; Set the parents container position: relative;. Now since you've got the whole page width and height, event.pageX and event.pageYwill give you right coordinates for topand left positions

score 0 · Answer 2 · answered Jun 30 '16 at 20:57

Your code have a typo. You should update your event.pageY, event.pageX with e.pageY, e.pageX.

var container = $(".action-calendar");
$(document).mouseup(function (e) {
     if (!container.is(e.target) && container.has(e.target).length === 0) {
          tooltip_HTML = $(".day-event .title").html();
          $(".day-event .title").html(tooltip_HTML);
          $(".day-event").fadeOut(500);
     }
     var monthEvents = $('td.dayEvent');
     $.each(monthEvents, function (key, td) {
     var x = $(td).children().attr('id', 'dayEvent-' + key);
     });
     $(".tooltip-wrapper").css({ position: "absolute", top: e.pageY, left: e.pageX });
});

And by the way, I don't know your .tooltip-wrapper's details. But this element shouldn't have a parent which has relative position. Because if it has, .tooltip-wrapper will position itself by its own parent.

Position tag where clicked

2 Answers2

Position
tag where clicked