I've used the following code to init the bootstrap popover.
Markup
<a class="help_popup" rel="popover" data-popover-content="#apiSearchTips" data-placement="bottom">
<span class="icon fw-stack fw-lg add-margin-left-1x" stylZ="font-size:10px">
<i class="fw fw-circle fw-stack-2x"></i>
<i class="fw fw-question fw-stack-1x fw-inverse"></i>
</span>
</a>
<div id="apiSearchTips" class="hide help-popover-content" >
//Popover content
</div>
Code
$('a[rel="popover"]').popover({
container: 'body',
html: true,
trigger:'click',
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
This does not work unless I change the selector attribute to a different one rather than rel="popover". For an example say I change it to data-trigger="popover" and it works. Why does this happen?
Related
I have this situation:
<a href="#"
class="btn btn-xs btn-bricky tooltips"
:data-id="row.id"
data-placement="top"
data-original-title="Remove"
#click.self.stop="removeRow($event)">
<i class="fa fa-times fa fa-white"></i>
</a>
Now, when I click on link it's ok, but if I click on <i> (which is inside of <a>) nothing happens (because of #click.self.stop).
What I would like to achieve is to trigger same method, in this case removeRow(), no matter if I click <a> or <i> is clicked. I need to get data-id attribute form ahref.
What I would like to achieve is to trigger same method, in this case removeRaw, no matter if I click <a> or <i> is clicked.
From what you say, you actually have to just remove the .self modifier.
Per docs (Event Handling/Event Modifiers/.self):
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
See changed code below.
new Vue({
el: '#app',
data: {
rows: [{id: 1, name: "row1"}, {id: 2, name: "row2"}]
},
methods: {
removeRow($event) {
console.log($event.currentTarget.dataset.id)
}
}
})
<script src="https://unpkg.com/vue#2.5.13/dist/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div id="app">
<div v-for="row in rows">
<a href="#"
class="btn btn-xs btn-bricky tooltips"
:data-id="row.id"
data-placement="top"
data-original-title="Remove"
#click.stop="removeRow($event)">
<i class="fa fa-times fa fa-white"></i> {{ row.name }}
</a>
</div>
</div>
The only modified bit in the template was #click.self.stop="removeRow($event)"
to #click.stop="removeRow($event)".
In the JS part, I created a rows just to test, and added console.log($event.currentTarget.dataset.id) to show how to get the id.
Then you don't need to use stop propagation or call function on self:
<a href="#"
class="btn btn-xs btn-bricky tooltips"
:data-id="row.id"
data-placement="top"
data-original-title="Remove"
#click.prevent="removeRow($event)">
<i class="fa fa-times fa fa-white"></i>
</a>
prevent is used to prevent the default link action.
You can use currentTarget instead of target to identify the attached element and get the href value from there.
$event.currentTarget.href
Alternatively, why not just to set the value in params:
#click.prevent="removeRow('your-value')"
In your method:
removeRow(myvalue) {
// do whatever you want to do with myvalue
}
The solution is quite easy. use #click.stop
#click.stop(openUser(user))
You can use the following sample to get it to work.
Run the code and click on the three texts, but you will only get the data-id value of the child and parent divs
new Vue({
el: '#app',
methods: {
init($event){
let el = $event.target.nodeName
var id = null;
if(el == 'A'){
id = $event.target.dataset.id
}
if(el == 'I'){
id = $event.target.parentElement.dataset.id
}
console.log( ' id', id)
}
}
})
<script src="https://unpkg.com/vue#2.5.9/dist/vue.js"></script>
<div id="app">
<a href="#" #click='init' data-id='42'> Inside A <br/>
<i>Inside I</i>
</a>
</div>
I am dynamically creating a div using jquery which contains add & close button. I am using Bootstrap tooltip for the add & close buttons. The problem that I am facing is Tooltip of the first add button doesn't gets hidden even when the mouse is hovering other add button. The tooltip of first add button remains as it is.(Refer screenshot) Any idea as to how to make it hidden.
I am using jquery clone method to create the dynamic divs.
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(".appendClass:first").clone().appendTo".addFiles");
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
Also for hiding the tooltips, I am using the below code but still the first tooltip is not getting hidden.
$(document).on('mouseleave','[data-toggle="tooltip"]', function(){
$(this).tooltip('hide');
});
updated HTML Code
<div class="row addFiles">
<div class="appendClass" style="margin-bottom: 1.5%;">
<label style="white-space: nowrap;" class="responsive-enter-details col-sm-3 control-label">Select Files</label>
<div class="col-sm-8 col-md-9">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename">Click to select file</span> <i class="fa fa-upload pull-right"></i>
</div>
<input id="inputfile" type="file" style="display: none;">
</div>
</div>
<button class="btn btn-box-tool addFilesBtn" data-toggle="tooltip" title="Click to add more files">
<i class="fa fa-plus"></i>
</button>
<button class="btn btn-box-tool closeFilesBtn" data-toggle="tooltip" title="Click to remove this block">
<i class="fa fa-times"></i>
</button>
</div>
</div>
Link to JS Fiddle:
https://jsfiddle.net/gLkrsbxc/4/
As you can see in JS Fiddle, the tooltip isn't getting closed.
Please check the last update for solution
As mentioned in the docs at http://getbootstrap.com/javascript/#tooltips, you need to initialize all the tooltips e.g.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
So, here you just need to initialize the tooltips after adding them to the DOM.
Just add $('[data-toggle="tooltip"]').tooltip() in your click function after cloning.
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(".appendClass:first").clone().appendTo".addFiles");
//initialize tooltips(add this line)
$('[data-toggle="tooltip"]').tooltip();
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
And I think if initialized properly, you won't need the hide function.
Update:
I think calling the initializing function doesn't work properly because it is a problem when dom manipulation operations are performed. Add slight delay after the append function and before the initializing function with setTimeout like this:
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(".appendClass:first").clone().appendTo".addFiles");
//initialize tooltips(give some time for dom changes)
setTimeout(function() {
$('[data-toggle="tooltip"]').tooltip();
}, 50);
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
Update 2
Just hide the tooltip of the button you just clicked before cloning:
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
//hide the tooltip
$(this).tooltip('hide');
$(".appendClass:first").clone().appendTo(".addFiles");
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
I gave up on Bootstrap popover, and went looking. I found WebUI Popover which has all the functionality i am looking for.
But I am having trouble setting the title of the popover using the html content of an element on the page. I get undefined in console.log() and the title loads empty. The html I am trying to access is dynamically created.
Where I think there is a bug in the plugin is that the content loads perfectly from another element on the page.
I have a FIDDLE here.
My WebUI Popover code is:
// Popover Menu initialize
$('.icon-popover-menu').webuiPopover({
placement: 'left',
trigger: 'click',
closeable: true,
multi: false,
animation: 'pop',
cache: 'false',
type: 'html',
width: '220',
title: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
content: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-body').html();
}
});
// Hide popover when screen changes size
$(window).on('resize', function() {
WebuiPopovers.hideAll();
});
$(window).on('scroll', function() {
WebuiPopovers.hideAll();
});
A sample of my HTML is:
<table class="fiddle">
<tr>
<td class="row-icon">
<button class="icon-popover-menu ion-fw btn-row-popover-menu">BTN</button>
<div style="display:none;">
<div class="btn-row-popover-menu-head">
<span>THIS IS THE TITLE</span>
</div>
<div class="btn-row-popover-menu-body">
<div class="input-group" role="group">
<a class="btn btn-app btn-icon-menu btn-popover-first" href="#">
EDIT
</a>
<a class="btn btn-app btn-icon-menu-danger" href="#">
DELETE
<br>
<span class="transaction-menu-legend">DELETE</span>
</a>
</div>
</div>
</div>
</td>
</table>
Any help is appreciated.
title: function() {
return $(event.target).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
This works fine. By doing $(this) you are trying to access the title element of the popover which obviously has no closest td.row-icon. Hence it is undefined.
HTML:
<div id="card_{{_id}}" class="card-panel" data-toggle="modal" data-target="#{{_id}}">
<span class="white-text">{{text}}</span>
<div class="card-action">
{{#each tags}}
<div class="chip">
<tag class="tag">{{this}}</tag>
<i id="removeTag" class="material-icons fa fa-ban"></i>
</div>
{{/each}}
<div class="chip" id="likeButton">
<i class="fa fa-thumbs-o-up"></i> {{likes}} Likes
</div>
</div>
</div>
above is sample html code from my meteor project. i want the div#card element to activate the modal by clicking on it. But i do not want the div.chip elements to toggle the modal when clicked. Is there a way i can disable child element from the data-toggle of the modal?
If you can use javascript, you can do stopPropagation for stopping click event on div.chip from bubbling to div#card.
$('.chip').on('click', function (ev) {
ev.stopPropagation();
});
For elements in a meteor template, you do something like this (replace yourTemplate with your template name),
Template.yourTemplate.events({
'click .div', function (ev, template) {
ev.stopPropagation();
}
});
See the JSFiddle
I am trying to toggle my class once clicked but i am having trouble doing so - if anyone can point out what i am missing or doing wrong that would be great.
<a class="rGroupIcons icon-plus addUsersToGroup float_right" href="#" data-bind="attr: { 'data-user-id': ID()}"></a>
<div class="Roles fade in" data-bind="foreach: $parent.Roles()">
<a style="display: none;" class="roleType btn addUsersWithGroupRole" data-bind="text: RoleTypeName, attr: { 'data-roletype-id': RoleId() }"></a>
</div>
Javascript
$(document).on('click', '.addUsersToGroup', function (event) {
$(".addUsersToGroup", $(this)).toggleClass("icon-plus icon-minus");
});
You just need to use $(this) as at the moment you are looking for .addUsertsToGroup within the element addUsertsToGroup
$(document).on('click', '.addUsersToGroup', function (event) {
$(this).toggleClass("icon-plus icon-minus");
});
Working example here http://jsfiddle.net/domjgreen/NLYNK/