[popover/tooltip] Support Programmatic Triggers

[joshdmiller]

The upstream JavaScript version supports trigger="manual" to allow for programmatic triggering.

[ProLoser]

Make isOpen a = instead of a &

Let people set the value in addition to read from it.

[pkozlowski-opensource]

Thinking about dialogs / tooltips / popovers - maybe it would be a good idea to have a $tooltip / $popover service (as we've got the $dialog one) so people can trigger popovers / tooltips as they like. Basically give people a way to control popovers / tooltips programatically. WDYT?

[ProLoser]

I think tool tips are far too contextual to the DOM to be triggered purely
programmatically. However I think you should be able to specify an
expression to watch as an attribute and drop the click-specific code. This
way someone can bind to a click (or prevent the hover tooltip from being
enabled) but if later on wants other code to trigger the tooltip he doesn't
have to change anything.
On Jul 13, 2013 8:01 AM, "Pawel Kozlowski" [email protected] wrote:

Thinking about dialogs / tooltips / popovers - maybe it would be a good
idea to have a $tooltip / $popover service (as we've got the $dialog one)
so people can trigger popovers / tooltips as they like. Basically give
people a way to control popovers / tooltips programatically. WDYT?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/590#issuecomment-20921061
.

[faceleg]

I agree with @ProLoser - for example using a popover to indicate invalid content entered into a form field - if the field was marked as invalid, the popover would display, disappearing when valid input was entered.

[vchatterji]

Just wanted to connect this issue to:
#618

I think there is a use case for showing only one popover at a time (using tooltips with mouseenter and mouseleave is not touch friendly and would not work well on tablets). Opening a single popover and dismissing it by touching/clicking elsewhere in the body would work well for tablets and phones. I have posted some code at 618 which can be used to accomplish this.

Cheers.

[eoliphan]

Has this been addressed with the $tooltipService? I see a mention on the docs, but it's usage isn't clear to me.

[29x10]

attrs.$observe(prefix + 'Trigger', function (val) {
  if (val != 'manual') {
    if (hasRegisteredTriggers) {
      element.unbind(triggers.show, showTooltipBind);
      element.unbind(triggers.hide, hideTooltipBind);
    }

    triggers = getTriggers(val);

    if (triggers.show === triggers.hide) {
      element.bind(triggers.show, toggleTooltipBind);  // for click
    } else {
      element.bind(triggers.show, showTooltipBind);
      element.bind(triggers.hide, hideTooltipBind);
    }

    hasRegisteredTriggers = true;
  }
});

scope.$watch(attrs[prefix + 'Toggle'], function (val) {
  if (val) {
    $timeout(show);
  }
  else {
    $timeout(hide);
  }
});

popover-toggle="expression" popover-trigger="manual"

[ndk-]

Any progress on this one ?

[durango]

Also interested in this, any progress?

[pkozlowski-opensource]

@ndk- @durango the surest way to see progress on those issue is to send a well unit tested pull request with the solution!

[arjunasuresh3]

Has anyone got solution for this?

[zulfajuniadi]

This is how I'm implementing triggers for popovers : Gist. Basically it overwrites the original popover with a new function. This method is called monkey patching.

[danludwig]

Here is a stackoverflow question I asked about this issue:

http://stackoverflow.com/q/20939754/304832

[MrOrz]

Tried @luthur 's snippet and it worked like a charm! Thank you very much @luthur !!

[sorich87]

Did the team agree on a solution for this?

I think making isOpen two-way binding and adding an onTrigger/onToggle callback, similarly to what's being done for the dropdown component in #1616, would be a good solution.

I can submit a pull request if no one else is working on it.

[tamtakoe]

👍

[djdmbrwsk]

Two way binding to show/hide would be great!

[homerjam]

+1

[Elijen]

This seems to be very demanded feature. Can you guys @pkozlowski-opensource @ProLoser let us know how should this be solved so somebody can create a PR?

I am not sure what happened with @luthur's original PR.

[Elijen]

Meanwhile I created a Bower package including popoverToggle directive, if anyone is interested:
https://github.com/Elijen/angular-popover-toggle

[krnlde]

Thank you for your effort @Elijen! Unfortunately your directive seems to lack the same feature I described earlier, when trying to add the toggle to a popover-template. Do you have a solution for that?

One week and nothing happend on this topic - sadly the maintainers do not really feel responsible to answer here.

[Elijen]

@krnlde That's strange, I think it should work with both popover and popover-template directives. I will check out tomorrow.

[Elijen]

@krnlde Seems to work for me:

popover: http://plnkr.co/edit/QeQqqEJAu1dCuDtSvomD?p=preview
popover-template: http://plnkr.co/edit/8hHg8wwtY6Cf8Gwr5uKb?p=preview

Note that popover-template works only for angular-ui v0.13.0 or higher.

[krnlde]

Ah I see. What I mean it is not working when putting the close trigger in the template for the popover itself - like we need this closing cross inside the .popover-title:

angular.module("template/popover/popover.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/popover/popover.html",
    "<div class=\"popover\"\n" +
    "  tooltip-animation-class=\"fade\"\n" +
    "  tooltip-classes\n" +
    "  ng-class=\"{ in: isOpen() }\">\n" +
    "  <div class=\"arrow\"></div>\n" +
    "\n" +
    "  <div class=\"popover-inner\">\n" +
    "      <h3 class=\"popover-title\" ng-if=\"title\">{{title}} <button type=\"button\" class=\"close\" ng-click=\"isOpen != isOpen\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button></h3>\n" +
    "      <div class=\"popover-content\" ng-bind=\"content\"></div>\n" +
    "  </div>\n" +
    "</div>\n" +
    "");
}]);

This is because the scope of the template is another than the one you put the toggle in and they don't inherit from each other (this is just a guess).

[Elijen]

@krnlde You should be to use $parent.isPopoverOpen (or what ever you named the $scope variable) from within the template.

Here is a plunkr: http://plnkr.co/edit/wIgZzH1Dw1Bm7QtZvZMn?p=preview

[krnlde]

Thanks for your plunkr, but it achieved a goal I'm not looking for. I need to add the close button inside the .popover-title which means the original popover template provided by bootstrap, not from my angular stuff - which by the way is the official way where bootstrap puts close buttons. Here is your plunkr updated with my requirements (and not working):
http://plnkr.co/edit/5XTTgnnQlnlpcFiAS5IU?p=preview

[krnlde]

Do you guys have any news on that?

[augnustin]

👍 here. I don't understand why this is not already available ...

[mudassir0909]

@Elijen Pretty neat! 👍

[augnustin]

Sweat! Thanks!

[augnustin]

I can't make it work though. :(

I have cloned the repo and built it with Grunt (AFAIK official releases don't include the commit yet). It generated a 0.13.4-SNAPSHOT version.

But if I have

<div tooltip="Hello" tooltip-is-open="true"></div>

it doesn't work. Did I miss something?

[RobJacobs]

@aug-riedinger It's meant to bind to a property in your controller.

[augnustin]

Correct me if I'm wrong, but having $scope.showTooltip = true in the controller and <div tooltip="Hello" tooltip-is-open="showToolip"></div> is the same as <div tooltip="Hello" tooltip-is-open="true"></div>

At least that's how it works for every other directive I use. Besides, I tried setting the variable in the controller and it doesn't work either...

Do you maybe have a working example available online?

[augnustin]

Cool it works!

I get an error message though:

TypeError: isOpenExp.assign is not a function
    at show (http://localhost:3000/assets/vendor/ui-bootstrap-tpls-0.13.4.js?body=1:3345:27)
    at showTooltipBind (http://localhost:3000/assets/vendor/ui-bootstrap-tpls-0.13.4.js?body=1:3308:17)
    at toggleTooltipBind (http://localhost:3000/assets/vendor/ui-bootstrap-tpls-0.13.4.js?body=1:3286:17)
    at Object.<anonymous> (http://localhost:3000/assets/vendor/ui-bootstrap-tpls-0.13.4.js?body=1:3481:19)
    at Object.scopePrototype.$watch.arguments.(anonymous function) [as fn] (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1905:36)
    at Scope.$get.Scope.$digest (http://localhost:3000/assets/vendor/angular.js?body=1:14244:29)
    at Scope.scopePrototype.$digest (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1924:23)
    at Scope.$get.Scope.$apply (http://localhost:3000/assets/vendor/angular.js?body=1:14507:24)
    at Scope.scopePrototype.$apply (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1987:22)
    at onUpdateTime (http://localhost:3000/assets/vendor/videogular.js?body=1:195:14)(anonymous function) @ angular.js?body=1:11608$get @ angular.js?body=1:8558$get.Scope.$digest @ angular.js?body=1:14262scopePrototype.$digest @ hint.js:1924$get.Scope.$apply @ angular.js?body=1:14507scopePrototype.$apply @ hint.js:1987onUpdateTime @ videogular.js?body=1:195onLoadMetaData @ videogular.js?body=1:173

[icfantv]

@aug-riedinger requests for support should go through the official, documented channels. Comments on closed issues are very easily lost.

Here's your example: http://plnkr.co/edit/DMqpDWJyRgDRPRbYr1Mx.

[dozed]

This means one cant use arbitrary expressions as value for is-open, e.g. signinForm.$isValidated && signinForm.loginEmail.$invalid ?

[RobJacobs]

@dozed Expression support was added under PR #4380 and is merged into the master branch.

[dozed]

@RobJacobs thanks! :)