I am using popper.js and I want to change some css properties of other elements based on tooltip placements. when I check the html element from browser's console, I see the attribute, so I tried to use javascript first by using document.querySelector("#popper-popup").dataset.popperPlacement;
nothing show up, then I tried with jQuery $("#popper-popup").attr("data-popper-placement");
, same!. finally using $("#popper-button").has("> #popper-popup[data-popper-placement^='bottom']").css("background","red");
nothing happened. when I checked the console of codepen the placement attribute does not exist...
could anyone explain this, and how can I get the placement of the tooltip. thanks
codepen popper popup
To make the answer makes sense, this is a function that I used to rotate the close button according to the popper orientation:
function rotateClose(){
$(divId+" .popover[data-popper-placement^='top']").prev().css("transform","rotate(180deg)");
$(divId+" .popover[data-popper-placement^='left']").prev().css("transform","rotate(90deg)");
$(divId+" .popover[data-popper-placement^='right']").prev().css("transform","rotate(-90deg)");
$(divId+" .popover[data-popper-placement^='bottom']").prev().css("transform","rotate(0deg)");
}