jQuery Tooltip: Inserting HTML code with links - javascript

I've got tooltips working in my WordPress posts like this one (http://vps46331.inmotionhosting.com/~hellod8/10-fun-things-to-do-with-kids-this-weekend-2-15-19-2-17-19/) down at the bottom of the page at the Share link. However, I also want to incorporate HTML into the code and that's where I'm striking out.
I found this fiddle: http://jsfiddle.net/AK7pv/111/
But adding this to the title of my link screws everything up and it just spits out HTML in the tooltip:
<p>Share <button id="trigger" class="trigger" data-html="true" data-tooltip-id="1" title="<p><a href='#' title='Email'><i class='fas fa-envelope'></i> Email</a><br><a href='#' title='Copy Link'><i class='fas fa-link'></i> Copy Link</a></p>"><i class="fas fa-share"></i></button></p>
This is the current Javascript:
jQuery(function () {
//show
jQuery(document).on('click', '.trigger', function () {
jQuery(this).addClass("on");
jQuery(this).tooltip({
items: '.trigger.on',
position: {
my: "right+10 center",
at: "left center",
collision: "flip"
}
});
jQuery(this).trigger('mouseenter');
});
//hide
jQuery(document).on('click', '.trigger.on', function () {
jQuery(this).tooltip('close');
jQuery(this).removeClass("on");
});
//prevent mouseout and other related events from firing their handlers
jQuery(".trigger").on('mouseout', function (e) {
e.stopImmediatePropagation();
});
});

First of all your opening <button> tag is not closed. Also you might need data-html=true within the button markup.

Related

How to include jquery ui widgets inside a 2nd stacked modal dialog?

I currently have a form inside a modal dialog, which has a link to add/edit options in one of the select drop downs. This link opens a new modal dialog on top of the old one as I want. However, I can't seem to get any jquery ui widgets to work inside this second modal dialog (specifically the accordian and datepicker widgets). I have followed How to execute jquery inside a Modal window? and have both the accordian and datepicker widgets working in the 1st modal dialog.
Code I've been trying for 2nd modal dialog (not working):
$(document).on("click", ".view_dialog_2", function(event) {
$dialog_2.load($(this).attr('href'), function()
{
$('#accordian').addClass('accordian2');
$('#meeting_date').addClass('date2');
$('#follow_up_date').addClass('date2');
$(function() {
$( ".accordian2" ).accordion();
collapsible: true;
});
$(function() {
$( ".date2" ).datepicker();
});
$dialog_2.dialog('open');
});
return false;
});
Code that is currently working for 1st modal dialog:
$(".view_dialog").click(function(){
$dialog.load($(this).attr('href'), function()
{
$(function() {
$("#addPartNum, .order-button")
.button();
});
$(function() {
$( "#meeting_date" ).datepicker();
});
$(function() {
$( "#follow_up_date" ).datepicker();
});
$dialog.dialog('open');
});
return false;
});
I have tried removing the $(document).on event binding for the 2nd dialog but it just takes me to the linked page w/o any modal dialog. I tried adding the classes because I thought maybe there was a conflict since the datepickers are present in the 1st dialog as well.
This is my first project using jquery, and I've been getting it for the most part, but this one has me stumped. Any help would be greatly appreciated :)
EDIT: here is the dialog code for 2nd not working dialog (not sure if necessary or not)
var $dialog_2 = $("#view_dialog_2").dialog(
{
autoOpen: false,
height: 800,
width: 800,
resizable: true,
modal: true,
buttons: {
"Submit": function() {
// do stuff
$dialog_2.dialog("close");
},
"Cancel": function() {
$dialog_2.dialog("close");
}
}
});
EDIT #2: here is a jsfiddle to kind of demonstrate my problem a bit more: https://jsfiddle.net/8pfjz3k5/
Might be more than one way to do this, but here is a simple example you can start from: https://jsfiddle.net/7xo1Lcy1/
HTML
<div id="start-box" title="First Form">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Form</p>
<a id="add" href="#">Add/Edit</a>
<div id="add-box">
<label>Next</label>
<input type="text" />
</div>
<script>
$("#add-box").dialog({
autoOpen: false,
resizable: true,
modal: true,
buttons: {
"Submit": function() {
// do stuff
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
</script>
</div>
<a id="start" href="#dialog-conf">Start Here</a>
JQuery
$(function() {
$("#start-box").dialog({
autoOpen: false,
resizable: false,
height: 340,
modal: true,
buttons: {
"Save": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#start").button();
$("#start").click(function() {
$("#start-box").dialog("open");
});
$("#start-box").on("click", "#add", function(e) {
console.log("Launching Add Box.");
$("#add-box").dialog("open");
});
});
So you can see I moved away from $(document) for the .on(). This should look for a Click event just when the dialog is open. It then opens the next dialog (the first still in the background).
I hope that helps.
EDIT
You didn't init the .accordion(). See update to your fiddle: https://jsfiddle.net/Twisty/8pfjz3k5/2/
$("#accordian").accordion();
Make sure your selector is correct and you call the right methods.

JQuery - Cannot seem to bind event to dynamic DOM elements

Using JQuery UI Draggable, I am cloning elements as they leave an unordered list. As these are new to the DOM, i'm trying to use the JQuery On() method to bind an event which will show a hidden link. The anchor with the class cancel has display: none; in the css.
HTML
<ul class="current-campaign">
<li class="draggable">One <a class="pull-right cancel" href="#">
<i style="color:red">Icon</i>
</a>
</li>
</ul>
<ul class="new-campaign sortable"></ul>
JQuery
$(".sortable").sortable();
$(".draggable").draggable({
connectToSortable: ".sortable",
helper: "clone",
});
$(".current-campaign").on("mouseout", ".cancel", function () {
$(".cancel").show();
});
Really having trouble figuring out why the link doesn't show up when it leaves the unordered list. Here's a JS fiddle to see it in action.
http://jsfiddle.net/og937wy7/
FINAL EDIT WITH ANSWER
Armed with the knowledge of how to use the on() function, I fixed up my code so it's working as I intended.
$(document).on("mouseover", ".new-campaign", function (e) {
console.error($(this));
$(".new-campaign").find('.cancel').show();
});
http://jsfiddle.net/og937wy7/4/
You are attaching an event to .cancel, which is not at all in the view:
$(".current-campaign").on("mouseout", ".cancel", function () {
$(".cancel").show();
});
How can you mouseout, when .cancel doesn't have an area? Replace it with .draggable:
$(".current-campaign").on("mouseout", ".draggable", function () {
$(".cancel").show();
});
I guess you are looking for the cancel to be shown once you hover and when you come away, it should hide. So change your code to:
$(".current-campaign, .new-campaign").on("mouseout", ".draggable", function () {
$(".cancel").hide();
}).on("mouseover", ".draggable", function () {
$(".cancel").show();
});
I would also tell this is not a right way, because, it affects all the .cancel. So you might need to use $(this).find():
$(".current-campaign, .new-campaign").on("mouseout", ".draggable", function () {
$(this).find(".cancel").hide();
}).on("mouseover", ".draggable", function () {
$(this).find(".cancel").show();
});
Fiddle: http://jsfiddle.net/dpojx7so/
But, everything can be done using CSS itself!!!
You just need to add this CSS, instead of the whole JS:
.sortable:hover .cancel {
display: inline;
}
Fiddle: http://jsfiddle.net/mx58stx3/

Close button of the bootstrap popover not working properly

I have a problem with the close button of the popover. The first time, i close the popover is fine, but the moment i open another one and try to close it, it does not work anymore.
Here my JS for the popover:
$(function () {
$('[data-toggle="popover"]').popover({
"html": true,
"title": '<span class="text-info"><strong>title</strong></span>'+
'<button type="button" id="close" class="close" >× </button>',
"content": function(){
var div_id = "tmp-id-" + $.now();
return details_in_popup($(this).data('url'), div_id);
}
}).on('shown.bs.popover', function(e){
var popover = jQuery(this);
$('.close').on('click', function(e){
popover.popover('hide');
});
});
});
Any clue what is causing this problem ?
Thanks!
second time a popover is created the $('.close') will get two elements.
if want to hide all popop use
$('[data-toggle="popover"]').popover('hide')

Triggering popover on button hover

I've looked everywhere for a solution, but everything I come up with isn't working. What I'm trying to accomplish is simple: I just want a popover to appear that describes what a button does when you hover over it. The button's code is as follows:
<button class="btn btn-danger deleteLine" type="button" id="deleteLine_<#=lineCount#>"><i class="icon-remove"></i></button>
I've tried a regex looking for a match at the front of the id:
$('[id^="deleteLine_"]').popover({
trigger: "hover focus",
content: "Delete this line."
});
$('button[id^="deleteLine_"]').popover({
trigger: "hover focus",
content: "Delete this line."
});
I've tried a regex on the id looking for a match anywhere in the id:
$('[id*="deleteLine_"]').popover({
trigger: "hover focus",
content: "Delete this line."
});
$('button[id*="deleteLine_"]').popover({
trigger: "hover focus",
content: "Delete this line."
});
And I've tried latching onto the class "deleteLine"
$('.deleteLine').popover({
trigger: "hover focus",
content: "Delete this line."
});
Struck out all three times. I'd like to avoid having to code "onmouseover" and "onfocus" attributes inline. I can't do static assignments (which works in other parts of the modal) due to the dynamic nature of the lines.
I'm using Bootstrap 2.3.2 and jQuery 2.1.1 in IE10 and FF21. Upgrading to newer versions isn't an option, unfortunately.
HTML
<p title="this is title">What is this</div>
JS
$(function() {
$('[title]').attr("data-rel", "tooltip");
$("[data-rel='tooltip']")
.attr("data-placement", "top")
.attr("data-content", function() {
return $(this).attr("title")
})
.removeAttr('title');
var showPopover = function() {
$(this).popover('show');
};
var hidePopover = function() {
$(this).popover('hide');
};
$("[data-rel='tooltip']").popover({
trigger: 'manual'
}).click(showPopover).hover(showPopover, hidePopover);
});

JQuery Toggle Issue, Requires Two Clicks

I'm Not too Fluent in Javascript but I managed to alter this code and make it toggle between the Play button and the Pause Button for a song... it goes like so:
$(function()
{
$("#plbutton").toggle(function()
{
$("#playit").hide();
$("#pauseit").show();
},
function()
{
});
});
$(function()
{
$("#pabutton").toggle(function()
{
$("#pauseit").hide();
$("#playit").show();
},
function()
{
});
});
This is the HTML:
<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit" ><img src="images/pausebutton.png" /></span>
and this is the css for the pause span:
#pauseit{
display: none;}
Now When I Click the Play Button It switches to the Pause Button, then When I Click the Pause Button it Switches to the Play but after that It requires TWO Clicks in order to work... It'll pause/play the song but the image wont toggle till you click again...
I tried looking around but due to my minimal knowledge of java and jquery I wasn't able to apply the fixes to my code...
Try this:
$(document).ready(function() {
$("#plbutton").on("click", function(e)
{
e.preventDefault();
$("#playit").hide();
$("#pauseit").show();
});
$("#pabutton").on("click", function(e)
{
e.preventDefault();
$("#pauseit").hide();
$("#playit").show();
});
});
If you use links, add e.preventDefault();
if not this should work
<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit"><img src="images/pausebutton.png" /></span>
$(document).ready(function() {
$("#playit").on("click", function(e) {
$("#$WeFuckinBall").play()
$(this).hide();
$("#pauseit").show();
});
$("#pauseit").on("click", function(e) {
$("#WeFuckinBall").pause()
$(this).hide();
$("#playit").show();
});
});
You can even leave out the span
the simplest code i can think of is
HTML:
<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit" ><img src="images/pausebutton.png" /></span>
JQUERY:
var elems = $("#playit,#pauseit")
elems.on("click", function(){
elems.toggle();
if($(this).attr('id') == 'playit'){
$('#WeFuckinBall').play();
}else{
$('#WeFuckinBall').pause();
}
});
You dont need toggle, simply using .click() will solve your problem:
$(function()
{
$("#plbutton").click(function()
{
$("#playit").hide();
$("#pauseit").show();
});
$("#pabutton").click(function()
{
$("#pauseit").hide();
$("#playit").show();
}
});

Categories

Resources