I am trying to add a conditional tooltip over a button. Using primeng tooltip component:
<div pTooltip="Please upload" style="display:inline-block;" tooltipPosition="top"
tooltipDisabled = "flag">
<button class="btn btn-primary btn-xs"><i class="fa fa-check"
aria-hidden="true"></i></button>
</div>
It is not working.
However, tooltip without "tooltipDisabled" is working fine.
Can someone please help me?
use [tooltipDisabled]="flag" instead
tooltipDisabled is looking for a boolean.
You are giving it a string (and not the flag attribute of your component as I would expect seeing the code).
Use [tooltipDisabled]="flag" instead.
I know this thread is old but maybe help others like helped to me. The listed solutions did not solve my problem but give me an idea: Only when i put [pTooltip]="variableWithMyText" with brackets and bind into a local variable with text content and combined with [tooltipDisabled]="flag", my code worked perfectly.
HTML (Condensed to minimum attributes for explanation):
<div [pTooltip]="tooltipText" [tooltipDisabled]="hideTooltip"></div>
Typescriptp file (Condensed to minimum attributes for explanation):
hideTooltip: boolean;
tooltipText = 'This text will showed on Tooltip';
if(conditionToShowTooltip){
this.hideTooltip = true;
} else {
this.hideTooltip = false;
}
Related
I would like to understand how to do the following, they asked me to try and create a function in the controller instead of writing the code in the view.
The code is:
<div class="row">
<div class="col-xs-12 max300"
uib-dropdown is-open="vm.descriptionDropdownOpen">
<textarea name="description" class="form-control"
ng-model="vm.presence.description"
ng-click="vm.toggleDescriptionDropdown()"
autofocus>
</textarea>
<ul id="descriptionDropdown" uib-dropdown-menu>
<li ng-repeat="descr in vm.loadedDescriptions"
ng-click="vm.presence.description = descr.text;
vm.descriptionDropdownOpen = false;">
{{descr.text}}
</li>
</ul>
</div>
</div>
so basically this creates a text box, and when you click on it, a dropdown menu will appear, and if you click on a string of the dropdown menu, that string will be put in the text box.
What I need to do is to create a function that will be put in the controller, so we can just call that function in the view and keep the code nicer.
This function just needs to do the last part of the code I posted above, take the string I click on from the dropdown menu and put it in the text box!
It's really simple but as I'm learning I'm not that sure on how I should write it
setDescription(text: string) {
// code should go here.
}
Sorry for this stupid question, just wanna be sure to understand correctly what I am doing! thank you
html
ng-click="vm.submitString(descr.text)"
controller
vm.submitString = function(text){
return vm.presence.description = text;
}
resolved like this:
setDescription(text: string) {
return this.presence.description = text;
}
I used seiyria angular-bootstrap-slider for range slider,but initially when page loads the tooltip is at wrong position.when it is placed in normal page it is working fine,but in modal it is intially at wrong position,but when I click it will be set.So how to slove this issue.
HTMl:
<button class="btn btn-default" value="modal"
onclick="confirmChangeMaxHours();"><i
class="glyphicon glyphicon-cog"></i> Adjust Value
Here is the link:
Codepen
I found this suggestion in some site:
setTimeout(function() {
slider.slider("relayout");
}, 500);
But,where I have to give setTimeout function,I tried to give but it is showing error like Slider is not defined.
Thanks in Advance.
add this css into your code
.tooltip{
margin-left:-32px!important
}
In my implementation the modal was over the tooltip. So, to fix it, I put the tooltip over all elements by adding a big z-index to all tooltips.
.tooltip.tooltip-top,
.tooltip.tooltip-bottom,
.tooltip.tooltip-left,
.tooltip.tooltip-right {
z-index: 100000;
}
I have a list of element inside an ng-repeat for which elements are clickable and draggable : if I click I display, and if I drag ... I drag the element.
When dragging I am displaying a circle with the number of element to drag.
My problem is that when a click, the drag circle is displayed. Whereas I just want to click and not drag.
Is there a way to set like 2s when clicking, like a long press action (with the mouse) to distinguish the click from the drag actions ?
It is similar to this post but now I want to prevent the drag when clicking (in the Angular way).
Here some markup :
<div class="docs-manager-doc box-container" ng-class="{'showActions':doc.showActions}">
<a class="box-square" ng-href ng-click="docsManager.toggleDocumentSelection(doc)">
<span class="flaticon-dark"
ng-class="{ 'flaticon-video-embed':(!doc.selected && doc.ref && doc.targetType==='EMBEDDED_VIDEO'),
'flaticon-{{doc.label | docExtMap}}':!doc.selected && !doc.ref,
'flaticon-tick':doc.selected }" ibp-prevent-drag>
</span>
</a>
<a ng-drag="true" ng-drag-data="doc" ng-drag-success="onDragComplete($data)" ng-drag-begin="onDragStart($data)" ng-drag-stop-move="onDragStop($data, $event)">
<span class="box-drag">
<span class="dragging" ng-show="iamdragging" >
<span class="flaticon-dark flaticon-small">
<p class="flaticon-default-doc">{{docsManager.documents.selected.length}}</p>
</span>
</span>
</span>
</a>
</div>
I am using ngDraggable directive.
Here some code if it helps :
.controller('DocumentsManagerCtrl', ['...',
function(...) {
$scope.iamdragging = false;
$scope.onDragStop = function(data, event){
$scope.iamdragging = false;
};
$scope.onDragStart = function(data){
if(!data.selected){
$scope.docsManager.toggleDocumentSelection(data);
}
$scope.iamdragging = true;
};
$scope.onDragComplete = function(){
// do something
};
May be it could be good to have a directive like ng-click-or-drag, when the click is more than 2s it is interpreted as a drag.
The issue has been solved here partially. https://github.com/fatlinesofcode/ngDraggable/issues/12. Posting in case it is useful to someone else browsing the question.
Setting ng-prevent-drag="true" on any element that you do want to initiate drag action, disables the drag action initiation on that object.
I guess benek who has asked this question is also involved in the discussion in the link above. he has indicated that this breaks on ipad, however I have tested this on laptop where it works.
I have implemented ng-drag-after-timeout="2000" attribute which allows to manage this.
The patch is here https://github.com/advantiss/ngDraggable/commit/51bd0e16b3f363935b249b2ee185968f4999f87d
I fixed this by making my image (which was a problem) a vice .
The DIV had a background-image: url();
Problem solved for me
i did not found the answer i was looking for, so that why i'm creating this question. I have a div that shows another one on click but i need to hide it (the div that appears on click) after the user selects one of the options, how can i do that?
When user's click on "#showmenu" the div ".mob" appears, after clicking in one of the ".mob" li's the ".mob" div dissapears.
P.S: Sorry for my bad english.
HTML:
<div id="showmenu"><img src="images/mobile.png" /></div>
<div class="mob" style="display: none;">
<ul>
<a data-scroll href="#home"><li>INÍCIO</li></a>
<a data-scroll href="#servicos"><li>EU FAÇO</li></a>
</ul>
</div>
Code:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.mob').slideToggle("fast");
});
});
I dont have any idea of the bootstrap or jquery plugins you are using but based on what is given, i'd say this should work.
$(document).ready(function() {
$('#showmenu').click(function() {
$('.mob').slideToggle("fast");
$('.mob a').click(function () {
$('.mob').slideToggle("fast");
});
});
});
Point to note there is a performance issue here , i.e code could be optimized better to search for classes or elements within a specific div than the whole document
Should those really be <a> if you don't intend to go anywhere? Can they just be <li>?
After that I think you want to give id's to the <li> that you have and then create a function much like the one you did for $('showmenu').click... that would hide the .mob.
Or if the <li> all get treated the same, maybe give them all the same class and just have one function for the class.
I am having the next problem. As you can see in my jsFiddle I am trying to use ng-bind-html-unsafe inside a template in my directive, and the attribute's value that I'm passing item{{itemColumn.field}} depends because is inside an ng-repeat. The thing is that I am using the ng-bind-html-unsafe in the columns that the attribute highlight is true, because the idea is to filter data (using the text input) and highlight the selection introduced by the user in the input. And as you can see, there is no value in those columns (because it seems that the binding is not working for some reason).
I have read about possible solutions and it one guy said that it can be fixed using $compile (which I'm actually using), so I have some time stuck in this with no idea on how to solve it.
Someone has faced something like this before? and can give me some ideas on how to solve the problem?
EDIT:
As Joachim suggests, I will provide more relevant code. In my template I have this
<td ng-repeat=\"itemColumn in gridOptions.gridColumnDefs \"
ng-show=\"itemColumn.visible | elementIsDefined : itemColumn.visible : true\" >
<div ng-switch on=\"itemColumn.highlight\"> " +
<span ng-switch-when=\"true\">
<div ng-bind-html-unsafe=\"item.{{itemColumn.field}} | highlight: {{gridOptions.searchInput}}\" ></div>
</span>
<span ng-switch-when=\"false\">{{item[itemColumn.field]}}</span>
</div>
</td>
I think my problem is related to the fact that I am trying to use a binding {{ }} inside the ng-bind-html-unsafe directive (Which i need). When the page renders, I got my div with the attributes as stated in the template, but the ng-bind-html-unsafe does not renders any HTML.
Just in case you need it, i found a way to make my issue disappear. In the link function inside my directive, I added the next functions:
scope.getValueToBind = function (item, subItem) {
return item[subItem];
};
scope.getFieldToFilter = function () {
var inputValue = scope.gridOptions.searchInput;
var returnValue = $("input[ng-model='" + inputValue + "']").val();
return returnValue;
};
And in my template I call this new functions instead of having a direct binding in the ng-bind-html-unsafe (which does not work at all with internal bindings). The functions return the values that I needed (as If i had a binding)
<td ng-repeat=\"itemColumn in gridOptions.gridColumnDefs \"
ng-show=\"itemColumn.visible | elementIsDefined : itemColumn.visible : true\" >
<div ng-switch on=\"itemColumn.highlight\">
<span ng-switch-when=\"true\"><div ng-bind-html-unsafe=\"getValueToBind(item,itemColumn.field) | highlight: getFieldToFilter()\" ></div>
</span>
<span ng-switch-when=\"false\">{{item[itemColumn.field]}}</span>
</div>
</td>
Here you can find the complete jsFiddle. If you type any letter/word that is inside the table, it will be highlighted.