I am using twitter boostrap to implement tooltip for my web app (twipsy)
My implementation is as follows:
%li.friend
%a{:href=>"#!/<%=nick%>/<%=question_slug%>", :rel=>"twipsy", :title=>"click to see xxxx's muse"}
%img{src: "<%= avatar_url %>"}
The sequence of steps is as follows:
1) Hover on the avatar I want to click => tooltip appears above avatar (no issue)
2) Click on avatar to load a new page
3) New page is loaded but the tooltip shown in 1) did not disappear and just remain displayed on the newly loaded page.
Is there any additional parameters I need to set to ensure that the tooltip disappears in step 3)?
As tooltip toggles on mouseenter and leave when you click the element and DOM structure is replaced with new page the mouseleave on the avatar is never triggered as the element was removed programmatically while mouse was hovering over it.
To fix that you need to call the .tooltip('hide') method when you click the avatar.
Related
Fast clicking the bootstrap delete icon twice results in breakage of the 1st delete cycle, tool-tip doesn't hide on mouseout and few other hyperlinks and mouse events stop working.
I have a set of contacts displayed in a list on an overlay, each of it with a bootstrap delete icon besides it which displays a tool-tip on mouse hover. for the delete icons, neither are we using button, nor anchor tag a, we are using bootstrap icons which act as the links for click event. Please suggest how to disable the 2nd click for them. Fast clicking the delete icon twice, disrupts the 1st delete cycle, causing other hyperlinks like delete icons and tool-tips on other contact records to be disabled and all other mouse events to be disabled, freezes the delete icon (which is no more visible on mouseover) and open overlay hyperlink icon.
Tried several options like:
Explicitly deactivating mouse events on row after 1st click of delete icon using angular.element('.deleteIconClass').css('pointer-events','none');
and activating mouse events on row after success or failure of delete AJAX call using angular.element('.deleteConfigIcon').css('pointer-events','auto'); respectively.
Calling angular UI grid refresh on overlay so as to hide the retained tool-tip and show back the delete icons on hover over delete icons on each row.
Explicitly calling mouseout or mouseleave and mouseover or mouseenter events to respectively hide and show the tool-tips on delete icons of each row.
None of the above are working satisfactorily. Am I missing something in the design or coding? Kindly let me know if any other information is required as it is an already existing code. Thanks.
Fast clicking the bootstrap delete icon twice results in breakage of the 1st delete cycle
Didn't quiet catch the rest if your question but If you're trying to prevent the an action from perormining more than one, you need to disable it on click.
<button type="button" ng-click="clicked()" ng-disabled="hasClicked">click me</button>
$scope.clicked = function(){
$scope.hasClicked = true;
someLongTask()
.finally(function(){
$scope.hasClicked = false;
});
}
you can use the same to disable all other buttons.
If you're using a with href you may want to refer to this directive to prevent click on an href that is disabled (eatClickIf).
https://gist.github.com/bcabanes/677305a013660ae7d55e
I have a scenario i.e.combobox and a button. I want to show a tooltip on combox when I click on a button and hide it when i click again. How do I do that without using ids on tooltip instance? Also can I specify the position of tooltip i.e x and y relative to combobox and style tooltip a little bit?
Thanks a lot
When you click on button create new tooltip instance as below:
Ext.create('Ext.tip.ToolTip', {
html:<tip contents>,
id:<some id>
});
And showBy() this instance for that combo like tip.showBy(<combo instance>).
Now again you click on button you check if tip instance is present, if yes then hide it else show it again. But you will need some id for tooltip.
In ext js I have a form panel that will add items on tab click i.e. items related to clicked tab.Im destroying the before created items and adding new items to the panel. Items are getting added properly but panel is not displayed. When I press f12 or if im using f12 if I close the console at this time the panel is shown. on f12 window open or close the panel is shown. Why not before ? What could be the problem?
I assume that you are using a Chrome browser and pressing F12 shows/hides the developer tools. So this action resizes the viewport, forcing a refresh of the panel layout and the components become visible.
When adding/removing items from a panel a yourformpanel.doLayout() could help recalculating the layout.
Another option is to embrace the adding/removing of items with the following code:
Ext.suspendLayouts();
... // add/remove items here
Ext.resumeLayouts(true);
BTW: More details on your problem would be helpful (e.g. code snippets, ExtJS version).
I am using storyboards to develop an application, i have a viewcontroller which has two buttons. I launch a tabbar controller on 1st button's click with first tab as default tab bar, now on 2nd button's click I want to launch the same tabbar controller and display 2nd tab on it.
I have tried setting the tab by using setSelectedIndex in prepareForSegue method, by giving an identifier to that segue. Help needed!
I have one custom object Named Itnery and i created one custom button Named Save and in page layout under custom button section i drag the button there but it not shown in the Itnery window when i opened it.Itnery section comes with Opportunity window.
Second thing is i want to save the data related to Itnery like email,from,to etc on button click as i created and i did it as under:
{!REQUIRESCRIPT("/soap/ajax/10.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/10.0/apex.js")}
Itinerary obj= new Itinerary;
obj.Email_Content_c = {!Itinerary_c.Email_Content__c};
obj.Email_Subject_c={!Itinerary_c.Email_Subject__c};
obj.Email_To_c={!Itinerary_c.Email_To__c};
obj.Flight_Info_c={!Itinerary_c.Flight_Info_c};
obj. Itinerary_c={!Itinerary_c.Itinerary_c};
obj.Opportunity_c={!Itinerary_c.Opportunity__c};
Database.update(obj);
message ='Saved Successfully';
window.location.reload();
Behavior: execute javascript
Content Source " Onclick javascript
please let me knw if anythng wrong in the code also..as i am new to saleforce
Thanks
I think you want to add your custom "Save" button to the related list.
Do it like this:
- at the Opportunity layout page click on "Edit layout" link
- then scroll down to related list (Itnery)
- click on the tool icon
- in the popup window you will see the settings of the related list
- there are "Columns" and "Buttons" areas, click on "Buttons"
- there are standard and custom buttons: select your custom button and click on the "Add" button
- save you settings