CODEWITHSUNDEEP
jqueryangularjsangular-material
Sjors Hijgenaar
Sjors Hijgenaar

Reputation: 1322

Is there a way to position md-tooltip relative to mouse cursor?

I want to position a md-tooltip element relative to where the mouse cursor is, similar to when you hover the progress bar in a YouTube video. I have the following simplified structure:

<div id="timerBar">
    <div id="progressBar"></div>
    <div id="bufferBar"></div>
    <div id="remainingBar"></div>
    <md-tooltip></md-tooltip>
</div>

Upvotes: 3

Views: 3185

Answers (1)

Sjors Hijgenaar
Sjors Hijgenaar

Reputation: 1322

Apparently yes there is:

<div id="timerBar" ng-mouseenter="setTooltip($event)" ng-mousemove="setTooltip($event)">
    <div id="progressBar"></div>
    <div id="bufferBar"></div>
    <div id="remainingBar"></div>
    <md-tooltip id="slider-tooltip" style="-ms-transition: none; -o-transition: none; -webkit-transition: none; transition: none;"></md-tooltip>
</div>

And the AngularJS/jQuery function:

$scope.setTooltip = function (e) {
    $("#slider-tooltip").css("left", e.clientX - $("#slider-tooltip").width()/2);
}

Upvotes: 5

Related Questions