Triggering popover on button hover - javascript

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);
});

Related

jQuery Tooltip: Inserting HTML code with links

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.

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')

Trigger Twitter Bootstrap Popover on Keyup Event in Textarea?

I'm trying to get a Bootstrap popover to fire when I make a change/keyup event in a text area. The idea is that a user will enter some text, I'll check to see what type of text and based on that, I will fire (or not fire) a popover.
showPopover = function() {
return $(this).popover("show");
};
hidePopover = function() {
return $(this).popover("hide");
};
$("textarea").on("change keyup", function(e) {
$("[rel=next-popover]").popover({
placement: "left",
trigger: "manual"
}).hover(showPopover, hidePopover).click(showPopover);
};
Somehow, this simple thing is not working (I'm also using the data attributes of Bootstrap popover for the popover data). Here is the jsfiddle: http://jsfiddle.net/bpjavascript/CgRKS/
Try
$("textarea").on("change keyup", function (e) {
$("[rel=next-popover]").popover("show");
});
$("[rel=next-popover]").popover({
placement: "right",
trigger: "manual"
})
Demo: Fiddle

Twitter Bootstrap: Hide other popovers when one is open

The following Bootstrap code gives me "sticky" popover (so users can interact with the content inside the popover). The issue is that when a popover is opened, other popovers should be closed (hidden). Any idea how I can implement this?
$("[rel=popover]").popover({placement:'bottom', trigger:'manual'}).hover(function(){
$(this).popover('show');
e.preventDefault();
});
There's a very simple solution here (not my solution, but works beautifully):
$('.link-popover').click(function(){
$('.link-popover').not(this).popover('hide'); //all but this
});
As per the bootstrap docs: Use the focus trigger to dismiss popovers on the next click that the user makes.
Dismissible popover
I've been having a play about with this and there's a few other problems regarding triggering the manual show/hide to get this to play nicely. Hover is actually mousein and mouseout and unless you add in some additional checks, you will come across the problems that I just did!
Here is my solution in action and I'll try to explain what I've done.
$(function () {
var overPopup = false;
$('[rel=popover]').popover({
trigger: 'manual',
placement: 'bottom'
// replacing hover with mouseover and mouseout
}).mouseover(function (e) {
// when hovering over an element which has a popover, hide
// them all except the current one being hovered upon
$('[rel=popover]').not('#' + $(this).attr('id')).popover('hide');
var $popover = $(this);
$popover.popover('show');
// set a flag when you move from button to popover
// dirty but only way I could think of to prevent
// closing the popover when you are navigate across
// the white space between the two
$popover.data('popover').tip().mouseenter(function () {
overPopup = true;
}).mouseleave(function () {
overPopup = false;
$popover.popover('hide');
});
}).mouseout(function (e) {
// on mouse out of button, close the related popover
// in 200 milliseconds if you're not hovering over the popover
var $popover = $(this);
setTimeout(function () {
if (!overPopup) {
$popover.popover('hide');
}
}, 200);
});
});
This worked perfectly for me with the following html:
Button 1
Button 2
Button 3
Hope that sorts you out :)
Using Bootstrap 3's event callbacks you can do:
$(document).on('show.bs.popover', function() {
$('.popover').not(this).popover('hide');
});
and in coffeescript
$(document).on 'show.bs.popover', ->
$('.popover').not(this).popover('hide')
Simpiet solution to close all other popovers. This can be added to any event where a popup will appear such as click/hover etc. Just before you show the popover paste in the following code:
$('.popover').not(this).hide(); //Hides all other popovers
This will remove all popovers on page except the current one
$('li').popover({
title: 'My title',
content: 'My content'
})
.on('show.bs.popover', function() {
if (window._bsPopover) {
$(window._bsPopover).popover('hide')
}
window._bsPopover= this;
})
.on('hide.bs.popover', function() {
window._bsPopover= null; // see Peter Jacoby's comment
});
I used a function for my content, so I have (in coffeescript) :
provideContentForPopover = (element) ->
$('.some-selector').not(element).popover 'hide'
"some content to be returned"
$('.some-selector').popover
content: -> provideContentForPopover #
I used a function for my content and it is work properly.
$(function () {
$('[data-toggle="popover"]').click(function(){
$(this).popover('toggle');
$('[data-toggle="popover"]').not(this).popover('hide'); //all but this
});
})
$('.allThePopovers').click(function () {
if ($(this).hasClass('popoverIsOpen')) {
$(this).removeClass('popoverIsOpen');
} else {
$('.popoverIsOpen').popover('hide');
$('.allThePopovers').removeClass('popoverIsOpen');
$(this).addClass('popoverIsOpen');
});
Just replace click with hover or mousein to suit your needs.
This works fine if you want to have only one popover opened at once, opened and closed by a click (cursor-position is irrelevant):
$('[data-toggle="popover"]').popover({ html: true }).bind("click", function(){
if(!$(this).parent().children("a").first().is(":hover"))
$( '[data-toggle="popover"]').popover("hide");
else
$( '[data-toggle="popover"]').not($(this).parent().children("a").first()).popover("hide");
return false;
});
It is important that every popover has an individual parent, like
<ul> <li> <popover> </li> <li> <popover> </li> </ul>
HTML:
<li>
<a id="quickmenu-i-305" data-toggle="popover" data-placement="bottom" data-title="Title" data-content='<h2>Plesk Login</h2>' href="Plesk Login">Ihr Kundenbereich</a>
</li>
I was able to accomplish similar by just hiding whichever popover was not the one that was clicked on. I'm not sure, but it seems to work well for me. This is for the popover being displayed on click and stays alive. It is hidden when another popover is clicked on.
<script>
$(function () {
$('[rel=popover]').popover({
}).click(function (e) {
$('[rel=popover]').not('#friend_' + $(this).attr('id')).popover('hide');
});
});
</script>
more simple way to do the job:
$('[rel=popover]').popover({
trigger: 'manual',
placement: 'bottom'
}).click(function(e) {
$('[rel=popover]').not('#' + $(this).attr('id')).popover('hide');
var $popover = $(this);
$popover.popover('toggle');
});
just make sure, that your popover has unique id ;]
your popover will behave as it does by default, just one popover at once.
i found that there is some troubles with dynamic popovers, so
here is 2 solutions for static and dynamic popovers:
first solution is to use popover option triger:'focus'
but this option will not work at some android devices
and the second one:
$('body').popover({
html: true,
//this is for static and dynamic popovers
selector: '[data-toggle="popover"]',
trigger: 'click',
content: function () {
//i am using predefined content for popovers. replace with your code or remove at all
return $($(this).data('templateselector') + ' .content').html();
},
title: function () {
return $($(this).data('templateselector') + ' .title').html();
},
container: 'body'
}).on('show.bs.popover', function (e) {
// i've found that showed popovers has aria-describedby
// and $('[data-toggle="popover"]).not(this) not working for dynamic popovers so i came with this:
$('[data-toggle="popover"][aria-describedby]').popover('hide');
var trigger = $(e.target);
// this is for adding custom class for popover container
// just remove it if you dont need
trigger.data('bs.popover').tip().addClass($(trigger).data('class'));
});
You must use an <a> anchor tag for compatibility.
My Fiddle: https://jsfiddle.net/oneflame/pnb8Ltj3/
Bootstrap Link -- http://getbootstrap.com/javascript/#dismiss-on-next-click
<div id="FragmentText1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, est laborum.
</div>
$(document).ready(function(){
$('a.LexicalEntry').popover({
html : true,
content: function() {
return getLexicalDefinition($(this).text());
} ,
trigger: 'focus',
placement: 'auto',
html: true,
container: 'body'
});
});
// *** Injects HTML into raw text.
// *** Splits the content string using a whitespace regular expression.
$('#FragmentText1').each(function() {
// var words = $.trim( $(this).text() ).split(/\s+/g);
var $this = $(this);
$this.html(
$this.text().trim().replace(/\b(\w+)\b/g,
"<a tabindex='0' class='LexicalEntry'' role='button' title='Definition: $1'>$1</a>"
));
});
Use this method to hide all other popover when you hover over or click other element for popover to open
one
two
three
four
$(document).ready(function(){
$('.btnPopover').mouseover(function(){
$(this).popover({
html: true,
trigger: 'manual'
}).popover('show');
$('.btnPopover').not(this).popover('hide');
});
});
Make sure you add bootstrap.js and bootstrap.css to you page.
Hope this helps.
Cheers!!
Suraj Kumar

preventDefault in bootstrap popover

I'm working with twitter bootstrap and I've got this code
$('.addYT').on('click', function(event) {
var $this = $(this);
event.preventDefault();
}).popover({
placement: 'bottom',
html: true,
content: function(e) {
return $('.YTadd').html();
}
});​
Everything works fine but in the popover content: there is a html code with something like <a href="#">. I want it to be preventDefault. But it doesnt work. Does anyone know how to do this?

Categories

Resources