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 .
Related
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.
I have a few <i> elements with glyphicons and I want them to be triggered when I press the ENTER key. I am using Angular 2
How can I do this?
<i class="glyphicon glyphicon-menu-down down"
*ngIf="!(sort.name === 'Last Name' && sort.order > 0)" (click)="sortTrips('name')" ></i> .
I've found the answer (only for Angular 2):
<div (keyup.enter)="function()">
<i class="glyphicon glyphicon-menu-down down"><i>
</div>
In this situation the application is working as inttended.
Try to create an event like #HassanIman say it looks like :
<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an "onclick" event to a p element.</p>
<p id="demo" onclick="myFunction()">Click me.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>
You try see the full exemple in this website : W3SCHOOLS ONCLICK EVENT
I have below span tag generated by custom tool (I can't ask it to generate in different way)
<span tabindex="0" > FINDME </span>
I want to write a script section within and to find the text "FINDME" and replace this with :
<span tabindex="0" style="color:red">FINDME</span>
or
<span tabindex="0">
<font color="red"> FINDME </font>
</span>
Basically I want to get the text colored. Also since I would have multiple span element coming that way so I had to search by text before replacing it.
I don't know how to code it so any help will be appreciated.
thanks !
This code will search for all the spans in your code and the one that have the text " FINDME " will get the color replaced. This solution is using jQuery
$(document).ready(function(){
$("span").each(function(){
if($(this).text() == ' FINDME '){
$(this).css('color','red');
}
});
});
https://jsfiddle.net/wearetamo/mdwkakzz/
The answer is :
<script> var span3 = document.querySelector('#dashboard_page_3_tab span'); span3.innerHTML = '<font color="red"> FINDME </font>' ; </script>
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
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/