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
Related
I'm doing an HTML assignment for a class at university and I was stuck on a problem asking me to create a button with the label “Change color!”. When the button is pressed, a script will execute causing the “green_parakeet.jpg” image to be replaced with “blue_parakeet.jpg”.
When I emailed the professor, she said for me to add onclick="statement" property, e.g. you can call a function here as shown in the example from the LX12 document <button onclick="f(x);">. Then you can write a script language to set up the function in a way that img tag should change src property value to a new one.
Here's my HTML code so far
<img src = "green_parakeet.jpg">
<button> Change Color! </button>
I can't figure out what to do next.
I have created this code according to this.
<script>
function change() {
document.getElementById("image").src = 'blue_parakeet.jpg';
}
</script>
<img id="image" src = "green_parakeet.jpg">
<button onclick="change()"> Change Color! </button>
edit: The code below will remove the onclick.
<script>
function change() {
document.getElementById("image").src = 'blue_parakeet.jpg';
document.getElementById('button').removeAttribute("onclick");
}
</script>
<img id="image" src="green_parakeet.jpg">
<button id="button" onclick="change()"> Change Color! </button>
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
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 scenario where I have to give action link to both icon and text. How can I do this with #html.Actionlink. I tried to add icon html code inside actionlink as text but it didnt work. How can we handle these cases with out using normal anchor tag?
<div>
<span class="glyphicon glyphicon-hdd"></span>
</div>
<div>
#Html.ActionLink("Request", "Request", "MyRequest")
</div>
As #Stephen in the comments mentioned, you can't use ActionLink() and include an icon. You're going to have to use an anchor. Your code in this format would look as follows:
<a href="#Url.Action("Request", "MyRequest")">
<span class="glyphicon glyphicon-hdd"></span>
<span>Request</span>
</a>
You can use the javascript code, like :
#Html.ActionLink("Request", "Request", "MyRequest", new { #class = "btn-primary", id = "btn-actionlink-export" })
<script type="text/javascript">
$(document).ready(function () {
$('#btn-actionlink-export').append('<span class="icon-file-excel position-right"></span>');
});
</script>
The goal its to have a menu activated by a button.
This menu can have any type of content inside, so it must adapt according to its content.
In this example i have an accordion, but could be just a grid, or a form, since i'm making it as a bootstrap/jquery widget.
The problem is that the menu changes size after opening and closing it several times.
How can i improve it to make it adaptable to content and consistent, regarding that it will accept different contents.
Code
http://jsfiddle.net/fpmsusm5/
Javascript:
var button = $('#button');
var dialog = $('#modal');
button.on('click', function () {
dialog.toggleClass('hide');
dialog.position({
my: "right top",
at: "right-2 bottom",
of: button
});
})
$("#openpanel1").on("click", function () {
var curr_panel = $("#panel1")
curr_panel.toggleClass('show hide');
curr_panel.collapse(curr_panel.hasClass('show') ? 'show' : 'hide');
});
...
/* ensure any open panels are closed before showing selected */
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
HTML:
<div class="pull-right">
<a id="button" class="btn">Settings</a>
</div>
<div id="modal" class="modal hide" style="overflow- y:hidden;width:auto;height:auto;max-height:100%; max-width:100% ">
<div class="modal-body" style="overflow-y:hidden; width:auto; height:auto; max-height:100%; max-width:100%">
<div id="accordion">
<button id="openpanel1" type="button" class="btn" style="width:100%;text-align:left"><i
class="icon-search"></i>Page Information
</button>
<div id="panel1" class="collapse">
<div class="panel-body">
Contents panel 1
</div>
</div>
....
</div>
</div>
</div>
Thanks for your insights.
Every time you position the dialog, it's changing the left property, and that's causing it to resize.
You don't have to reposition it every time you show/hide it, you can just do it once:
var dialog = $('#modal');
dialog.position({
my: "right top",
at: "right-2 bottom",
of: button
});
button.on('click', function () {
dialog.toggleClass('hide');
});
Then it stays the same size. Updated fiddle: http://jsfiddle.net/fpmsusm5/1/