I am working on a project that uses bootstrap
My question is:
How can I delete the title of popover
This is my code
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-trigger="hover" data-content="Some content">
CLICK HERE
</a>
And this is the resultset
This is resultset I want
Thanks
Just remove the attribute title from your anchor tag
CLICK HERE
Related
My simple jQuery function works fine if I click an anchored link on page-1 (body turns black fine) BUT if I have the same anchored link on another page-2 to link back and anchor to my page-1 the function doesn't work? It goes back to page-1 fine but body on page-1 doesn't turn black as expected?
HTML on page-1:
<div id="offcanvas">
<a href="#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
HTML on page-2:
<div id="offcanvas">
<a href="page-1.htm#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
jQuery:
$("#offcanvas a").click(function(){
$('.offcanvas').offcanvas('hide');
$("body").css('background-color', '#000000')
});
Many thanks in advance for your help.
B]
So I manage to find the solution, this works:
$("#offcanvas a").on("click", function() {
if (window.location.hash) {
$("body").css('background-color', 'black');
}
:)
please use below html structure
you have not define id on html structure
<div id="offcanvas">
<a href="#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
I have this template
<ng-template #thumbnailTemplate let-context="thumbnailContext">
<div id="{{context.divId}}">
<button type="button" data-toggle="modal" (click)="showEnlargeImage(context)">
<img id="{{context.imgId}}" src="{{context.imgSrc}}"/> <!-- this will have width, height=80-->
</button>
<a *ngIf="this.isEditing" href="#" id="{{context.closeId}}" onClick="deleteThumbnailfromContainer(context)"></a>
</div>
</ng-template>
The <a> is shown dynamically depending on the value of isEditing. This part works fine. On clicking <a>, I expect that deleteThumbnailfromContainer gets called and the page doesn't redirect because deleteThumbnailfromContainer returns false. But the page gets refreshed. I also think that deleteThumbnailfromContainer is not getting called because deleteThumbnailfromContainer has an alert which doesn't pop up.
deleteThumbnailfromContainer(thumbnailContext:ThumbnailContext){
console.log("delete thumbnail clicked ");
let index = this.thumbnailContainerRef.indexOf(thumbnailContext.viewRefId);
console.log("deleting index "+index);
this.thumbnailContainerRef.remove(index);
alert();
return false;
}
The generated html looks like follows (looks alright to me).
<a _ngcontent-c9="" href="#" onclick="deleteThumbnailfromContainer(context)" id="close-button-1"></a>
I can't figure out why the code isn't working correctly here.
I think you should try this out.
<a *ngIf="this.isEditing" href="javascript:void(0)"
(click)="deleteThumbnailfromContainer(context)" id="close-button-1"></a>
i have a django template that uses for loop to print comments i want to show the input field and a button when the edit link is clicked how do i do that.
and also when the edit button is pressed i wanna get the value from that specific input field. how do i do that?
{% for comment in comments %}
<div class="comment mdl-color-text--grey-700">
<header class="comment__header">
<img src="images/co1.jpg" class="comment__avatar">
<div class="comment__author">
<strong>{{comment.User_name}}</strong>
<span>{{comment.date}}</span>
</div>
</header>
<div class="comment__text">
{{comment.text}}
</div>
<!-- FAB button , class "mdl-button--fab"-->
<a href="javascript:delete_comment('{{comment.text}}','{{comment.blogslug}}')">
<button class="mdl-button mdl-js-button mdl-button--fab">
<i class="material-icons">delete</i>
</button>
</a>
<!--when this link is clicked bellow edit_comment div should appear -->
<a href="">
<button class="mdl-button mdl-js-button mdl-button--fab">
<i class="material-icons">edit</i>
</button>
</a>
<!-- and also when i click the edit button how can i get value from the input -->
<div id="edit_comment" style="visibility: hidden;">
<input type="text" name="edit_comment">
<button>edit</button>
</div>
</div>
{% endfor %}
so the problem is there are going to many other comments of this type because they are printed using a loop.
Firstly, why are you wrapping your button in an <a> tag? Unnecessary.
Get rid of visibility: hidden. Use display: none or a class like Bootstrap's d-none.
I suggest d-none because it allows you to add the class and remove it without worrying about the inherited display property, i.e. display: flex or display: block.
https://getbootstrap.com/docs/4.0/utilities/display/
Write a custom function with an event listener.
Inside your template loop:
<button class="mdl-button mdl-js-button mdl-button--fab" onclick="handleClick(this)">
<i class="material-icons">edit</i>
</button>
ASSUMING YOU HAVE REMOVED THE <a> TAG
JavaScript:
let handleClick = function(param) {
let editCommentDiv = param.parentNode.lastChild;
editCommentDiv.style.display = "none"
};
This is by no means the best way to do it. I highly suggest you use BootStrap's d-none class. Also, what you should actually do is assign an ID based on the for loop to both the button and to the div, i.e. id=editcommentdiv_{{ forloop.counter }} this way you won't need to use DOM to navigate to the last element to get the edit div, and can just target the div directly via ID.
in my html I got Bootstrap glyphicons with the following code:
<span class="glyphicon glyphicon-copy" style="cursor:pointer;font-size:20px;">
</span>
is it possible to show some text on hover on it as it is done with img tag. Tried to add alt attribute but it did not work. Maybe there are some polifills for this (tooltips) or smth like that? Bootstrap-3 is used.
Thank you.
If you want to add tooltip use:
HTML
<span
class="glyphicon glyphicon-copy"
data-toggle="tooltip"
style="cursor:pointer;font-size:20px;"
title="myText"
></span>
JS
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
or else you can just add data-title attribute to your <span> element
<span
class="glyphicon glyphicon-copy"
data-toggle="tooltip"
data-title="myText"
style="cursor:pointer;font-size:20px;"
></span>
Try this:
<span class="glyphicon glyphicon-copy" title="yourtext" style="cursor:pointer;font-size:20px;">
Add attribute title with text thant you want to show on hover .
I am trying to put html in the bootstrap popover and the content shows nicely but when I click on my links inside the popover it just goes to the parent 'OpenRecent' method on the anchor tag that triggers the popover. You can see below in the data-content html the different ways I try to call the function I want. How can I achieve this?
<ul id="RecentSearches" class="nav nav-tabs nav-stacked well" data-bind="foreach: CurrentItems">
<li>
<div>
<input type="checkbox" class="checkbox inline" data-bind="value: $data.TransId,
checked: $root.ItemsSelected"/>
<a href="#"
data-bind="text: $data.Description + '-' + $data.County,
attr:
{
id: $data.TransId,
'data-title': $data.Description
},
click: $root.OpenRecent"
data-trigger="hover"
rel="popover"
data-html="true"
data-content="<a data-bind='click: $parent.Print.bind($data)'>Print</a> |
<a data-bind='click: app.RecentSearches.Print.bind($data)'>Print 2</a>
<a data-bind='click: $parent.Email'>Email</a> |
<a data-bind='click: $parent.SaveToPDF'>PDF</a> |
<a data-bind='click: $parent.SavetToCSV'>CSV</a>">
</a>
</div>
</li>
</ul>
The HTML is your data-content will not have been bound by Knockout, as it was added dynamically later.
One option is to add a way to identify the links (class) and then use an unobstrusive approach to adding an event handler.
$("ul").on("click", ".print", function(event) {
var context = ko.contextFor(this);
context.$root.Print(context.$data);
event.preventDefault();
});
I am not sure why your OpenRecent function is getting called. It appears to me that bootstrap creates the popover outside of the element that it is triggered on. So, this would not be a parent of the popover. If you are still having an issue with that part, then maybe you could get it working in jsFiddle.
Here is a fiddle with the unobtrusive handler: http://jsfiddle.net/rniemeyer/Edww3/