pure angular-style tooltip

[igler]

Hi you once said that it would be nice to find some "pure angular-style tooltip" to fork in order to be able to wrap things in popups. Maybe this http://mgcrea.github.io/angular-strap/#/popover or https://github.com/angular-ui/bootstrap/tree/master/src/tooltip is helpful?

[vitalets]

@igler angular-strap requires jquery + bootstrap.js, I'm not happy to pull these dependencies.
Angular-ui is much more pretty. I think the best solution is to fork tooltip.js as starting point for popup. And keep it inside angular-xeditable to allow non-angualr-ui projects use it.

[igler]

Can you please give me a hint where to start? In my case I need a popup for every element that is marked as x-editable. This is because I use them in a table and I want to prevent that the table column border jump back and forth.

[vitalets]

Basically, to have popup you should change $show and $hide methods of editable-factory: https://github.com/vitalets/angular-xeditable/blob/dev/src/js/editable-factory/controller.js#L257

Please feel free to fork the repo and try to add popup. I would be happy to help and merge

[igler]

The tooltip.js library renders the following code when clicking the element:

<div class="tooltip top in fade" ng-class="{ in: isOpen(), fade: animation() }" title="" content="Hello, World!" placement="top" animation="tt_animation()" is-open="tt_isOpen" style="top: 70px; left: 355px; display: block;">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner ng-binding" ng-bind="content">Hello, World!</div>
</div>

I have tried it with an input-element and then the code looks like this:

<div class="tooltip top in fade" ng-class="{ in: isOpen(), fade: animation() }" title="" content="<input type="text">" placement="top" animation="tt_animation()" is-open="tt_isOpen" style="top: 45px; left: 430.5px; display: block;">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner ng-binding" ng-bind-html-unsafe="content"><input type="text"></div>
</div>

Do we want to add an attribute mode to the xeditable tags that decides if we are in normal or popup mode? If so, then I have to add it to the EditableController function, right?

And, am I right that we do not need a new directive but just change the way things are display?

[vitalets]

1. mode="popup | inline" should be added to editableConfig with default value inline and then used be editable factory controller. Form should just call show() of each field and dont care how it will be displayed.
2. Yes, directives should stay the same.

[igler]

The HTML-code would look like this:

<a href="#" editable-bstime="user.time" editable-mode="popup">{{ (user.time | date:"HH:mm") || 'empty' }}</a>

Cannot find editableConfig. In which file is it?

BTW the function self.show = function()... in controller.js: I do not get the point what to add here. Where do I have to place the <div class="tooltip">-tags?

[ryanlanciaux]

Maybe less than ideal but I needed popover styles for text and select elements. I just modified some CSS as a short term solution (it's very manual sizing / layout). http://jsfiddle.net/EWcUw/4/

[igler]

That would work in my case but I am having the problem that it does not recognize the borders of the accordion element it is in. This means, that it partially disappears under the left border of the accordion. I there a way to make it dynamic so it adopts its environment?

[ryanlanciaux]

If I understand correctly, it would be possible to re-position the popover based on the layout of the container (saying the popover would be on the left of the link or below it etc etc) but I think it would be a bit more javascript and couldn't be solved as easily with just CSS. One other thing (and this may look terrible) is this something where you can adjust the z-index of the accordion and the popover so that the popover would show up on top?

[vitalets]

@ryanlanciaux looks very nice! it should be definetly added in future version.
@igler is plain bootstrap popover works correctly with accordion border?

[igler]

No, it does not. All have problems recognizing the accordion container. But as a workaround instead of centering the popup over the item it would be good to have an alignment parameter. Left-align would mean, that the left side of the item you click on and the left border of the popup have one common x-value. Together with the placement parameters (top, bottom, left and right) I could do a very fine grained adjustment.

[ryanlanciaux]

@vitalets Thanks! I appreciate all your incredible work on these plugins!
@igler Totally understandable -- I may try to fork and add something like this (but handling the sizing, etc) to the project in the future. For now, I have updated the demo to allow popup positioning on the right side http://jsfiddle.net/EWcUw/5/. This is still very manual sizing / positioning. The side can be adjusted by messing with the left / right positioning on the form and the borders/positioning in the before/after pseudo element. I hope this is more inline with what you're trying to do :)

[igler]

I have found some additional alignment options here: https://github.com/dkleehammer/bootstrap-popover-extra-placements

[vitalets]

We need wait this pull request to be merged angular-ui/bootstrap#1046 to allow use html in popover content

[albertomizrahi]

Any updates on this?

[andrewharry]

@amb110395 +1

[mackelito]

FYI: Angular-straps no longer requires bootstrap or jQuery

[Wesseldr]

Looks like the: "popup mode (waiting angular-ui/bootstrap#1391)" and also "merged angular-ui/bootstrap#1046" is now merged. hope someone can give it a kick, currently to new to get the big picture of this :)

[aguirrel]

Hi guys, thanks for this great component! Somebody has some update?

[mitcht]

Closed as being too old

[aguirrel]

@mitcht Could you review why do you close it? I think being old doesn't mean nobody need it. If it was solved, tag it, if not, please leave it open.

[mitcht]

There are 226 issues. I'm trying to close a few. If they pop up again, we'll work on them. Sorry.