I am working on Vuejs + Laravel.
There is one tooltip directive which uses bootstrap's functionality.
Here it is:
window.Vue.directive("tooltip", function(el, binding) {
// console.log(el, binding);
window.$(el).tooltip({
title: binding.value,
placement: binding.arg ? binding.arg : "right",
trigger: "hover",
html: true
});
});
and its usage is like this:
<div
v-tooltip="messages.type_button"
class="form-group row border-bottom p-2"
>
where
message:{
type_button:'Hello World, this is tooltip'
}
So this tooltip is working great in desktops but it is causing display issue in mobile device hence we need to hide this tooltip altogether in mobile devices.
Since I have not found any package it uses, so guessing it is a custom directive developed.
We tried hiding using media queries but no help. Can anyone have idea, what should I do ?
So finally I found the solution Thanks to Umezo's comment
here it is:
window.Vue.directive("tooltip", function(el, binding) {
// console.log(el, binding);
if (window.matchMedia("(min-width: 300px)").matches) {
window.$(el).tooltip({
title: binding.value,
placement: binding.arg ? binding.arg : "right",
trigger: "hover",
html: true
});
}
});
Related
It seems a dynamically created element with a tooltip won't be triggered using: $(this).tooltip('show');
Anything I'm doing wrong?
Reproduction online
<div class="not-editable">
<span>Click here</span>
</div>
JS:
//dynamic tooltip
$('body').tooltip({
selector: '.not-editable .to-edit',
placement: 'bottom',
trigger: 'manual',
title: 'Actual times cannot be given as the trip is not confirmed',
template: '<div class="tooltip error-tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
});
//dynamic added element...
setTimeout(function(){
$('.not-editable').find('span').addClass('to-edit');
}, 1000);
//Trying to trigger the tooltip
$(document).on('click', '.to-edit', function(){
console.log("showing...");
$(this).tooltip('show');
});
Actually changing
trigger: 'manual',
to
trigger: 'click | hover',
(as much as removing it does) works too as in :
https://jsfiddle.net/kj9sxnrc/4/
at Bootstrap Tooltips Docs it says
How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
I want to use Kendo Tabsrip with MVVM and show tabs on the left-side of the screen. In general, in non-MVVM environment tab positions is set like this:
$(document).ready(function () {
$("#tabstrip-left").kendoTabStrip({
tabPosition: "left",
animation: { open: { effects: "fadeIn" } }
});
}
However, I don't know how to set tabPosition attribute in the kendo MVVM. I have tried this in MVVM but it did not worked:
<div data-role="tabstrip"
data-tabPosition="left"
data-bind="events: { select: onSelect },
visible: isVisible">
....
</div>
Here is a MVVM example of the code that has this data-tabPosition attribute but tab position is still on the top
http://dojo.telerik.com/UDELe
You should use this way:
data-tab-position="left"
There is rule: data-some-variable parameter will produce javascript variable someVariable
I'm using jquery-1.7.2.min.js and jquery-ui.min.js and wanted to implement a Tooltip. It worked right out of the box, but later I planned to customize some of the default effects and they don't seem to work.
Here's the code:
$(function () {
var temp = $("#tooltipname").attr('title');
$("#tooltipname").tooltip({
content: temp,
position: "top",
opacity: 0.1,
effect: 'fade',
predelay: 3000,
fadeInSpeed: 3000,
});
})
the strange thing is that the content attribute works fine and as you can see I assign it a value of temp variable. The value of temp is read from the title value of HTML span tag. Nevertheless the other attributes don't work at all.
I've played a bit with my code after getting help from you guys and decided to share the code I made in jsFiddle. I show how to implement not only one tooltip but all tooltips designated by #tooltipname on the whole page. Moreover the code shows how to break lines (multiline tooltip), which was not trivial to achieve.
Here's the HTML code:
<br />
<br />
<br />
<span title="my tooltip1 <br> new line" id="tooltipname">Hover me</span>
<span title="my tooltip2 <br> new line" id="tooltipname">Hover me2</span>
Here's the jQuery code:
$(document).ready(function () {
var temp = $("#tooltipname").attr('title');
$(this).tooltip({
content: function () {
return $(this).attr("title");
},
position: {
at: "center bottom",
my: "center top"
},
opacity: 0.1,
show: {
effect: 'fadeIn',
duration: 500,
delay: 500
},
});
});
Hope it's helpfull for other newcomers to JQuery.
For those of you who'd like to play with this code -> jsFiddle Code
It is working as expected. Your p is taking the 100% width of the page, and the tooltip is positioning on the top and center of that. You need to set your '#tooltipname' as 'inline-block' or something like that.
And according to the documentation you need to set the my and at values.
Fiddle
I am using raty to perform the rating functionality and I am showing it inside a popover.
The problem is that the first time I click on the link, it correctly create the stars but, when I click for the second time, the stars are replicated, so it popups 10 stars instead of 5.
$('#member1').popover({
html: true,
placement: 'bottom',
content: function() {
return $($(this).data('contentwrapper')).html();
}
}).click(function() {
$('.star').each(function(el) {
$(this).raty({
starOff : 'http://wbotelhos.com/raty/lib/images/star-off.png',
starOn : 'http://wbotelhos.com/raty/lib/images/star-on.png',
start: $(this).attr('data-rating')
});
});
});
I replicate the error in this fiddle.
Can anyone let me know how to fix this, and, therefore, only show 5 stars?
Thanks!!!!
I am not overly familiar with raty, but it seems like you need to destroy the existing before running the code a second, or third time.
$(this).raty('destroy');
something like that, check the raty doc for the exact implimentation
please review this code
$('#member1').popover({
html: true,
placement: 'bottom',
content: function() {
return $($(this).data('contentwrapper')).html();
}
}).click(function() {
$('.star').each(function(el) {
$(this).raty('destroy');
$(this).raty({
starOff : 'http://wbotelhos.com/raty/lib/images/star-off.png',
starOn : 'http://wbotelhos.com/raty/lib/images/star-on.png',
start: $(this).attr('data-rating')
});
});
});
Demo :http://jsfiddle.net/x9WhH/3/
When I use bootstrap 3.0 popover with placement: auto right inside tables it doesn't work, and it flows away from the table size.
placement: auto right (means popover should flow to the right if it has a place otherwise flow to the left)
Check this link:
http://jsfiddle.net/DTcHh/65
However, when I place it outside a table it works as it's supposed to be!
$('button.hey').popover({
placement: 'auto left',
html: true,
//selector: '[rel="popover"]',
content: function () {
return "Hi man";
}
})
Any idea?
In your case I suggest you to write your own callback for placement rather using 'auto'.
If you want 'right' for your all buttons except last td. Here is how placement can be written
$('button.hey').popover({
placement: function(context,source){
//check if current td is last one
var td = $(source).closest('td');
console.log(td);
if(td.next().length == 0) {
return 'left';
}
return 'right';
},
html: true,
//selector: '[rel="popover"]',
content: function () {
return "Hi man";
}
})
If you want to handle based on position, you can handle that in placement callback.
check this fiddle http://jsfiddle.net/codejack/DTcHh/66/