Create CSS Arrow at cursor (or clicked element) location?

Question

I have two vertical Divs on my page. The one on the left has a table of properties. Clicking a property results in the right div appearing and displaying details for that property. I'm using a CSS arrow as explained at http://cssarrowplease.com/ and all looks and works great. The problem is that the arrow is always in the same place. I would like it to be at the same height as the element/row that was clicked.

Here is what I tried: (By the way, I'm using Knockout so this is coming from a knockout click event. I have confirmed that "position" is correct)

function viewConflicts(data, event) {
    var position = $(event.target.parentElement).position();
    $('.arrow_box:after').css('top', position.top);
    $('.arrow_box:before').css('top', position.top);
}

And here is the CSS adapted from the site above:

.arrow_box:after, .arrow_box:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-right-color: #cbcece;
    border-width: 30px;
    /*top: 50%;*/
    margin-top: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-right-color: red;
    border-width: 31px;
    /*top: 50%;*/
    margin-top: -31px;
}

Normally it's vertically centered, obviously due to the "top: 50%". When I comment that out and use my function above it puts the two elements at different positions vertically, both towards the top.

score 0 · Answer 1 · edited May 23 '17 at 12:18

Apparently you cannot set pseudo classes directly using jquery. See Changing width property of a :before css selector using JQuery

This solution works great:

$('body').append('<style>.arrow_box:before{top:' + (position.top + 8) + 'px !important;}</style>');
$('body').append('<style>.arrow_box:after{top:' + (position.top + 8) + 'px !important;}</style>');

Also, I had to replace .position() with .offset() as position returned the relative value.

var position = $(event.target.parentElement).offset();

Create CSS Arrow at cursor (or clicked element) location?

1 Answers1