Mixing
Hiding a tooltip via the tooltip-is-open attribute doesn't work
I want to display a clickable element (a font awesome icon) that copies some data into the clipboard. When a click event occurs I also want to display a tooltip which should disappear once the cursor left (mouseleave) the element.
This element is a directive as I use it several times in my application.
Copying the data is not an issue at all, displaying the tooltip neither. However, it doesn't disappear when the mouse leaves the font awesome icon.
To fix this, first I set the scope.tooltipIsOpen to true and as expected it displayed the tooltips by default.
Then I put some $log.info in the code to see if the value was updated to false. It seems that the value is updated. I also checked if the events were triggered and they are. I assume that the view doesn't update as it should so the tooltip remains displayed. I eventually tried to put a scope.$apply() in the post function, without success.
Here is my directive :
app.directive('toClipboard',
['$log', 'ngClipboard',
function ($log, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltip hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltip.
element.on('mouseenter', function () {
scope.tooltipIsOpen = false;
});
// Hiding tooltip.
element.on('mouseleave', function () {
scope.tooltipIsOpen = false;
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]);
NB: ngClipboard is a service to copy data to clipboard.
Here is the associated HTML template:
<span>
<i class="fa fa-copy clickable"
uib-tooltip="Copied"
tooltip-placement="tooltipPlacement"
tooltip-is-open="tooltipIsOpen"
tooltip-trigger="'click'"
ng-click="copy(clipboardData)"></i>
</span>
Do you have any idea or any lead to solve this issue ?
Thanking you in advance,
Plunker : https://plnkr.co/edit/okzxdSz1VvbkycehMT2G?p=preview
angularjs angular-ui-bootstrap twitter-bootstrap-tooltip
asked Jan 2 at 17:51
CybermateCybermate
52210
add a comment |
I want to display a clickable element (a font awesome icon) that copies some data into the clipboard. When a click event occurs I also want to display a tooltip which should disappear once the cursor left (mouseleave) the element.
This element is a directive as I use it several times in my application.
Copying the data is not an issue at all, displaying the tooltip neither. However, it doesn't disappear when the mouse leaves the font awesome icon.
To fix this, first I set the scope.tooltipIsOpen to true and as expected it displayed the tooltips by default.
Then I put some $log.info in the code to see if the value was updated to false. It seems that the value is updated. I also checked if the events were triggered and they are. I assume that the view doesn't update as it should so the tooltip remains displayed. I eventually tried to put a scope.$apply() in the post function, without success.
Here is my directive :
app.directive('toClipboard',
['$log', 'ngClipboard',
function ($log, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltip hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltip.
element.on('mouseenter', function () {
scope.tooltipIsOpen = false;
});
// Hiding tooltip.
element.on('mouseleave', function () {
scope.tooltipIsOpen = false;
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]);
NB: ngClipboard is a service to copy data to clipboard.
Here is the associated HTML template:
<span>
<i class="fa fa-copy clickable"
uib-tooltip="Copied"
tooltip-placement="tooltipPlacement"
tooltip-is-open="tooltipIsOpen"
tooltip-trigger="'click'"
ng-click="copy(clipboardData)"></i>
</span>
Do you have any idea or any lead to solve this issue ?
Thanking you in advance,
Plunker : https://plnkr.co/edit/okzxdSz1VvbkycehMT2G?p=preview
angularjs angular-ui-bootstrap twitter-bootstrap-tooltip
asked Jan 2 at 17:51
CybermateCybermate
52210
Hi Cybermate I see in your scope object that you only have'clipboardData': '@','tooltipPlacement': '@'try adding teh values you want with 2 way binding.
– Aaron Rabinowitz
Jan 2 at 18:49
If I understand you want me to add 'tooltipIsOpen': '=' ? I will do it tomorrow as I am at home but I can try with a Plunker.
– Cybermate
Jan 2 at 19:00
add a comment |
I want to display a clickable element (a font awesome icon) that copies some data into the clipboard. When a click event occurs I also want to display a tooltip which should disappear once the cursor left (mouseleave) the element.
This element is a directive as I use it several times in my application.
Copying the data is not an issue at all, displaying the tooltip neither. However, it doesn't disappear when the mouse leaves the font awesome icon.
To fix this, first I set the scope.tooltipIsOpen to true and as expected it displayed the tooltips by default.
Then I put some $log.info in the code to see if the value was updated to false. It seems that the value is updated. I also checked if the events were triggered and they are. I assume that the view doesn't update as it should so the tooltip remains displayed. I eventually tried to put a scope.$apply() in the post function, without success.
Here is my directive :
app.directive('toClipboard',
['$log', 'ngClipboard',
function ($log, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltip hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltip.
element.on('mouseenter', function () {
scope.tooltipIsOpen = false;
});
// Hiding tooltip.
element.on('mouseleave', function () {
scope.tooltipIsOpen = false;
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]);
NB: ngClipboard is a service to copy data to clipboard.
Here is the associated HTML template:
<span>
<i class="fa fa-copy clickable"
uib-tooltip="Copied"
tooltip-placement="tooltipPlacement"
tooltip-is-open="tooltipIsOpen"
tooltip-trigger="'click'"
ng-click="copy(clipboardData)"></i>
</span>
Do you have any idea or any lead to solve this issue ?
Thanking you in advance,
Plunker : https://plnkr.co/edit/okzxdSz1VvbkycehMT2G?p=preview
angularjs angular-ui-bootstrap twitter-bootstrap-tooltip
asked Jan 2 at 17:51
CybermateCybermate
52210
I want to display a clickable element (a font awesome icon) that copies some data into the clipboard. When a click event occurs I also want to display a tooltip which should disappear once the cursor left (mouseleave) the element.
This element is a directive as I use it several times in my application.
Copying the data is not an issue at all, displaying the tooltip neither. However, it doesn't disappear when the mouse leaves the font awesome icon.
To fix this, first I set the scope.tooltipIsOpen to true and as expected it displayed the tooltips by default.
Then I put some $log.info in the code to see if the value was updated to false. It seems that the value is updated. I also checked if the events were triggered and they are. I assume that the view doesn't update as it should so the tooltip remains displayed. I eventually tried to put a scope.$apply() in the post function, without success.
Here is my directive :
app.directive('toClipboard',
['$log', 'ngClipboard',
function ($log, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltip hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltip.
element.on('mouseenter', function () {
scope.tooltipIsOpen = false;
});
// Hiding tooltip.
element.on('mouseleave', function () {
scope.tooltipIsOpen = false;
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]);
NB: ngClipboard is a service to copy data to clipboard.
Here is the associated HTML template:
<span>
<i class="fa fa-copy clickable"
uib-tooltip="Copied"
tooltip-placement="tooltipPlacement"
tooltip-is-open="tooltipIsOpen"
tooltip-trigger="'click'"
ng-click="copy(clipboardData)"></i>
</span>
Do you have any idea or any lead to solve this issue ?
Thanking you in advance,
Plunker : https://plnkr.co/edit/okzxdSz1VvbkycehMT2G?p=preview
angularjs angular-ui-bootstrap twitter-bootstrap-tooltip
angularjs angular-ui-bootstrap twitter-bootstrap-tooltip
asked Jan 2 at 17:51
CybermateCybermate
52210
asked Jan 2 at 17:51
CybermateCybermate
52210
edited Jan 2 at 19:45
Cybermate
asked Jan 2 at 17:51
CybermateCybermate
52210
asked Jan 2 at 17:51
CybermateCybermate
52210
asked Jan 2 at 17:51
CybermateCybermate
52210
52210
Hi Cybermate I see in your scope object that you only have'clipboardData': '@','tooltipPlacement': '@'try adding teh values you want with 2 way binding.
– Aaron Rabinowitz
Jan 2 at 18:49
If I understand you want me to add 'tooltipIsOpen': '=' ? I will do it tomorrow as I am at home but I can try with a Plunker.
– Cybermate
Jan 2 at 19:00
add a comment |
Hi Cybermate I see in your scope object that you only have'clipboardData': '@','tooltipPlacement': '@'try adding teh values you want with 2 way binding.
– Aaron Rabinowitz
Jan 2 at 18:49
If I understand you want me to add 'tooltipIsOpen': '=' ? I will do it tomorrow as I am at home but I can try with a Plunker.
– Cybermate
Jan 2 at 19:00
Hi Cybermate I see in your scope object that you only have
'clipboardData': '@','tooltipPlacement': '@' try adding teh values you want with 2 way binding.– Aaron Rabinowitz
Jan 2 at 18:49
Hi Cybermate I see in your scope object that you only have
'clipboardData': '@','tooltipPlacement': '@' try adding teh values you want with 2 way binding.– Aaron Rabinowitz
Jan 2 at 18:49
If I understand you want me to add 'tooltipIsOpen': '=' ? I will do it tomorrow as I am at home but I can try with a Plunker.
– Cybermate
Jan 2 at 19:00
If I understand you want me to add 'tooltipIsOpen': '=' ? I will do it tomorrow as I am at home but I can try with a Plunker.
– Cybermate
Jan 2 at 19:00
add a comment |
1 Answer
1
active
oldest
votes
I managed to get this works by wrapping my code in $timeout();. Here is the working code:
app.directive('toClipboard',
['$log', '$timeout', 'ngClipboard',
function ($log, $timeout, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.iconClass) {
attrs.iconClass = 'fa-copy';
}
if (!attrs.iconColorClass) {
attrs.iconColorClass = 'text-primary';
}
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltips hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltips on mouseenter event.
element.on('mouseenter', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
// Hiding tooltips on mouseleave event.
element.on('mouseleave', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'iconClass': '@',
'iconColorClass': '@',
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]
);
$timeout makes sure it runs within an $apply cycle I guess.
answered Jan 3 at 9:52
CybermateCybermate
52210
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54010920%2fhiding-a-tooltip-via-the-tooltip-is-open-attribute-doesnt-work%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I managed to get this works by wrapping my code in $timeout();. Here is the working code:
app.directive('toClipboard',
['$log', '$timeout', 'ngClipboard',
function ($log, $timeout, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.iconClass) {
attrs.iconClass = 'fa-copy';
}
if (!attrs.iconColorClass) {
attrs.iconColorClass = 'text-primary';
}
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltips hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltips on mouseenter event.
element.on('mouseenter', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
// Hiding tooltips on mouseleave event.
element.on('mouseleave', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'iconClass': '@',
'iconColorClass': '@',
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]
);
$timeout makes sure it runs within an $apply cycle I guess.
answered Jan 3 at 9:52
CybermateCybermate
52210
add a comment |
I managed to get this works by wrapping my code in $timeout();. Here is the working code:
app.directive('toClipboard',
['$log', '$timeout', 'ngClipboard',
function ($log, $timeout, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.iconClass) {
attrs.iconClass = 'fa-copy';
}
if (!attrs.iconColorClass) {
attrs.iconColorClass = 'text-primary';
}
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltips hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltips on mouseenter event.
element.on('mouseenter', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
// Hiding tooltips on mouseleave event.
element.on('mouseleave', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'iconClass': '@',
'iconColorClass': '@',
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]
);
$timeout makes sure it runs within an $apply cycle I guess.
answered Jan 3 at 9:52
CybermateCybermate
52210
add a comment |
I managed to get this works by wrapping my code in $timeout();. Here is the working code:
app.directive('toClipboard',
['$log', '$timeout', 'ngClipboard',
function ($log, $timeout, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.iconClass) {
attrs.iconClass = 'fa-copy';
}
if (!attrs.iconColorClass) {
attrs.iconColorClass = 'text-primary';
}
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltips hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltips on mouseenter event.
element.on('mouseenter', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
// Hiding tooltips on mouseleave event.
element.on('mouseleave', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'iconClass': '@',
'iconColorClass': '@',
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]
);
$timeout makes sure it runs within an $apply cycle I guess.
answered Jan 3 at 9:52
CybermateCybermate
52210
I managed to get this works by wrapping my code in $timeout();. Here is the working code:
app.directive('toClipboard',
['$log', '$timeout', 'ngClipboard',
function ($log, $timeout, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.iconClass) {
attrs.iconClass = 'fa-copy';
}
if (!attrs.iconColorClass) {
attrs.iconColorClass = 'text-primary';
}
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltips hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltips on mouseenter event.
element.on('mouseenter', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
// Hiding tooltips on mouseleave event.
element.on('mouseleave', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'iconClass': '@',
'iconColorClass': '@',
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]
);
$timeout makes sure it runs within an $apply cycle I guess.
answered Jan 3 at 9:52
CybermateCybermate
52210
answered Jan 3 at 9:52
CybermateCybermate
52210
answered Jan 3 at 9:52
CybermateCybermate
52210
answered Jan 3 at 9:52
CybermateCybermate
52210
52210
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54010920%2fhiding-a-tooltip-via-the-tooltip-is-open-attribute-doesnt-work%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hi Cybermate I see in your scope object that you only have
'clipboardData': '@','tooltipPlacement': '@'try adding teh values you want with 2 way binding.– Aaron Rabinowitz
Jan 2 at 18:49
If I understand you want me to add 'tooltipIsOpen': '=' ? I will do it tomorrow as I am at home but I can try with a Plunker.
– Cybermate
Jan 2 at 19:00