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.
Related
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
});
}
});
I have succesfully defined a popup for a clickable link element:
The element:
`Alerts Page`
The script which triggers my popup (note the commented lines!)
$('[data-tcs]')
.popup({
// (default as in example provided on the S-UI, works well)
// popup : $('#popup-1'),
// (attempt 1, doesn't work)
// popup : $(this).data('tcs'),
// (attempt 2, doesn't work)
popup : $(this).attr('data-tcs'),
on : 'hover',
delay: {
show: 0,
hide: 500
},
hoverable: true
});
The popup itself (irrelevant):
<div class="ui popup" id="popup-1">
<h3>TANJ!</h3>
</div>
TO DO
Now the popup works well ONLY when the ID of target content is pointed directly, but...
I am about to put about 10 more popups and I want to use the same script to trigger them.
How I can point to the proper popup depending on the value of data-tcs attribute?
My attempts were friutless.
Thx for all help.
The docs are here:
http://semantic-ui.com/modules/popup.html#/examples
Whenever you need to pass instance specific data to any plugin options the easiest way is to wrap the initialization in an each loop
Then the each loop will expose the instance as this.
When you are trying to use this currently it is the window not the element
$('[data-tcs]').each(function() {
var $el = $(this);
$el.popup({
popup: $el.attr('data-tcs'),
on: 'hover',
delay: {
show: 0,
hide: 500
},
hoverable: true
});
});
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/
I am trying to refresh the content of the popover. I know the content gets updated when i click the button, however, its not showing on the already opened popover..
$('#popOverPr')
.popover(
{
animate : false,
html : true,
offset : 10,
placement : 'bottom',
template : '<div class="popover popOverProgress" "><div class="arrow" style="left:80%";></div><div class="popover-inner"><h3 class="popover-title" style="display:none;"></h3><div class="popover-content"><p></p></div></div></div>',
content : function() {
return $('#popOverPr-content').html();
}
$('#popOverPr').popover('show');
$('.popoverButton').on('click', function() {
//if(........)
$('#popOverPauseText').text("Resume");
// else
$('#popOverPauseText').text("Start");
}
});
You can destroy the popover, recreate a new one with different content