I have button with tooltip created as
<button class="btn btn-xs btn-light"
onclick="editMaterial(#material.Id)"
title="Upravit materiál" data-tooltip="tooltip">
<i class="fas fa-edit"></i>
</button>
Tooltip is activated using jQuery
$('[data-tooltip="tooltip"]').tooltip()
the issue is that when I click on the button and modal window opens, the tooltip is also open. So the tooltip interfere with the modal.
I tried
$('[data-tooltip="tooltip"]').hide()
$('[data-tooltip="tooltip"]').show()
or
$('body').click()
unsuccessfully, any idea ?
I had the same problem. I fixed it for popper.js v1.x this way:
// FIX: Tooltip not hiding on button cklick
$('[data-toggle="tooltip"]').click(function () {
$('[data-toggle="tooltip"]').tooltip('hide');
});
Hope this helps
Related
I am using NgbModal model for modal popup(dialog) in angular 6.
I have a parent form with button, when clicked onto that button it opens the popup.
so my requirement is, when modal pops up, the background (parent form) should be editable or clickable.
also when ever modal pops up the background should be in Editable mode.
i have tried data-keyboard="false" data-backdrop="static" properties to make the parent form editable.
but this doesn't work.
<button aria-label="matMenuButton" mat-icon-button (click)="open()">
<mat-icon aria-label="menu" aria-hidden="false">picture_in_picture</mat-icon>
</button>
<div>
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div>
component that opens :
open() {
this.modalRef = this.service.openTest('Test View');
}
openTest(title: string) {
this.modalRef = this.service.open(TestComponent, { size: 'sm' });
}
When ever the modal (dialog) pops up,
the background (parent form) should be editable always.
Using the html below I can show a popover html button. However when adding classes to the button, the popover button will break and show on the screen. Is there a way to add classes such as btn to the button in the popover?
<div class="col-md-2 popscustom"><a href="#x"><img data-toggle="popover" data-html="true" title="Popover title" data-content="
<div>
<button>Test</button>
</div>
$(function () {
$('[data-toggle="popover"]').popover({ trigger: 'hover', html: 'true', container: 'body'})
})
Make sure you're not passing data-html:"true" as a string. It needs to be a boolean...
$('[data-toggle="popover"]').popover({ trigger: 'hover', html:true})
Switch to single quotes (') for html content inside the popover...
<img data-toggle="popover" title="Popover title" data-title="foo" data-content="<div><button class='btn btn-danger'>Test</button></div>" src="//placehold.it/200">
Demo: https://www.codeply.com/go/EKuiKhFaeP
I have a button which consists of a image & name. On clicking of that button I need to replace the image & content. I have given my code below.
<div class="btn-default">
<button name="Save" [ngClass]="[bntStyle]" (click)="submit()">
<img class="img1" src="./image1.png"/><a
class="sidebarlinks" >Content1</a>
</button>
</div>
Likewise I have few more buttons.
My ts file:
submit() {
this.bntStyle = 'btn-change';
}
My css file:
.btn-change {
background-image: url("./image1_after_click.png");
}
Can somebody help me with this please?
You need to remove [] from ngClass value
<button name="Save" [ngClass]="bntStyle" (click)="submit()">
I have a simple button with a span inside it with some boostrap icon as its class.
Nothing serious.
<button ng-click="ctrl.toggleMenuDropDown()" class=" cornerMenuButton menuButton">
<span class="fa fa-reorder"></span>
Menu
</button>
The problem is that the span part does not register the click. When I click on the rendered button where the icon is, the click is not registered. And I don't know why, or what might be causing that.
But when I add stop propagation to the button it all works fine. Like so:
<button ng-click="ctrl.toggleMenuDropDown(); $event.stopPropagation()" class=" cornerMenuButton menuButton">
<span class="fa fa-reorder"></span>
Menu
</button>
It works fine. Why is that?
It's very hard to know why you are using a span inside a button element but clarifying your question:
You need to add ng-click on the span element also. If you want only the span ng-click to work you need to add event.stopPropagation() to your toggleMenuDropDown(event) function passing event to this function.
The definition of event.stopPropagation is:
The event.stopPropagation() method stops the bubbling of an event to
parent elements, preventing any parent event handlers from being
executed. Tip: Use the event.isPropagationStopped() method to check
whether this method was called for the event.
$("#but").click(function(event){
event.stopPropagation();
});
$("#foo").click(function(){
alert("parent click event fired !");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="foo">button
<span id="but">
<span></button>
Try this...Added z-index to my span and it worked out
.reorder{
.fa {
position: relative;
z-index: 1;
}
span {
position: relative;
z-index: 1;
}
}
That is when i click on a button
it should fire browser's find event
and browser's find pop up should appear.
You can set your button to call Javascripts window.find function. Works in Chrome and Firefox and possibly Edge.
Javascript
findString = function findText(text) {
window.find(text);
alert("String \x22" + text + "\x22 found? " + window.find(text));
}
HTML
<p>Apples, Bananas, and Oranges.</p>
<button type="button" onClick='findString("Apples")'>Search for Apples</button>
<button type="button" onClick='findString("Banana")'>Search for Banana</button>
<button type="button" onClick='findString("Borange")'>Search for Borange</button>
Here is a website for reference.
https://developer.mozilla.org/en-US/docs/Web/API/Window/find