From an example,i got this code to remove popover
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css'>
<div class="container">
<h1>Bootstrap Popover Hide Open</h1>
<table>
<tbody><tr data-toggle="popover" title="first row"><td>One</td><td>View</td></tr>
<tr data-toggle="popover" title="second row"><td>Two</td><td>View</td></tr>
<tr data-toggle="popover" title="third row"><td>Three</td><td>View</td></tr>
</tbody></table>
</div>
<script>
$('[data-toggle=popover]').popover({
trigger:"click"
});
$('[data-toggle=popover]').on('click', function (e) {
$('[data-toggle=popover]').not(this).popover('hide');
});
</script>
But in my project i am using another version of jquery and bootstrap.
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
How to do same with new scripts not with older scripts.
Note : With new scripts <td> need to be clicked twice to open popup once it is clicked before.
Code
Related
I want to create a search input with button in popover, and when someone click outside of popover get close(not next click, because we need click on input and button in popover).
Because of that I need a function in java script for closing popover to put it on budy (then when user click on budy popover got close)
So here we are, I created this but after several click its not work and even some time it open two time.
And hide button some time working and a lot of time not work.
HTML & source code
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<br>
</i>
<schelps.src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<br><br><br><br>
<button class="btn btn-danger" onclick="hidebtn()">Hide</button>
JavaScript code
const popover = new bootstrap.Popover
(
document.querySelector
(
'[data-toggle="popoversearch"]'
),
{
container: 'body',
html: true,
placement: 'bottom',
sanitize: false,
content: `
<div id="PopoverContent">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" aria-label="seach popover" aria-describedby="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popoversearch" data-placement="bottom" data-html="true">
<i class="fas fa-search"></i>
</button>
</div>
</div>`
}
);
function hidebtn() {
popover.hide();
popoversearch.hide();
}
I put the code here
https://jsfiddle.net/Alireza07/fot8mbg6/28/
Thanks for your helps.
I'm using the trigger as hover, but when I click on a link with this function the tooltip does not disappear, it will be disturbing on the screen forever
the tooltip is instantiated with this code
$('[data-toggle="tooltip"]').tooltip({
container: 'body',
trigger: 'hover'
});
in tags everything works perfectly, and in some cases works too, I do not know why some happen this, could someone give me a light?
Edit: I've also tried using this code to hide the tooltip with the click event
$(document).ready(function(){
$('[data-toggle="tooltip"]').click(function () {
$('[data-toggle="tooltip"]').tooltip("hide");
});
});
But it doesn't work
Edit*: Picture of how it is (the text is in Portuguese)
Edit**: HTML code
<ul style="clear: both;" class="pager wizard">
<li class="button-previous previous"><a title="Voltar" data-toggle="tooltip"><i class="fa fa-arrow-left"></i></a></li>
<li class="voltar"><a title="Voltar" data-toggle="tooltip"><i class="fa fa-arrow-left"></i></a></li>
<li class="finalizar"><a>Finalizar<i class="fa fa-check" style="padding-left:5px;"></i></a></li>
<li class="next"><a class="competencia-stripe" data-toggle="tooltip" title="Continuar"><i class="fa fa-arrow-right" ></i></a></li>
</ul>
This Code Use To tag Click to Hide Hover and You Remove Click Event From below code to hover not hide.
Try This Code...! It's Worked.
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
})
$('.btn-secondary').click(function(){
$('[data-toggle="tooltip"]').tooltip('hide');
});
.tooltiphide {
margin-top: 50px;
margin-top: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>Boostrap Tooltip</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="tooltiphide">
<a href="#" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</a>
<a href="#" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</a>
<a href="#" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</a>
<a href="#" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</a>
</div>
</body>
</html>
This is because trigger is not set. The default value for trigger is 'hover focus', thus the tooltip stay visible after a button is clicked, until another button is clicked, because the button is focused.
So all you have to do is to define trigger as 'hover' only. Below the same example you have linked to without persisting tooltips after a button is clicked :
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
})
the doc example in a fiddle -> http://jsfiddle.net/vdzvvg6o/
I tried to hide all tooltips as soon as the page loads and it worked
$([data-toggle="tooltip"]).on('load', function(){
$('[data-toggle="tooltip"]').tooltip("hide");
});
but I believe it is not the best solution and I seek a better, another solution that came to me was this
window.addEventListener("click", function (event) {
$('.tooltip.fade.top.in').tooltip("hide");
}
The <a> tag defines a hyperlink, which is used to link from one page to another.
so it is not appropriate for one-page actions like this. but you can fix this issue by loses focus on the element by .focusout()
$(document).ready(function(){
$('[data-toggle="tooltip"]').click(function(){
$(this).focusout();
});
});
Hy,
my Picture describes very good what iam searching for..Its ap popup/modal box with 2 select option...only 1 can be choosen
What iam serching for is a popup Window with different select options....maybe in buttons....or as Pictures...i dont want to use the Standard select Element...
Is/are there any nice Example...Codepen....Jquery plugin/plugins that can be used to solve this easily?
Thank You very much
This can be done with fancybox and jQuery.
https://jsfiddle.net/axanj0n5/4/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css"/>
<div style="display: none; width:500px;" id="hidden-content">
<h2>Lightbox</h2>
Select me 1
Select me 2
</div>
<div class="container">
<a data-fancybox data-src="#hidden-content" href="javascript:;" class="btn btn-lg btn-success">
Open Lightbox
</a>
<p>
Selected Value<br>
<input type="text" name="selected_value" id="selected_value"/>
</p>
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<script>
$(function () {
$('body').on('click', '.select-btn', function () {
$selectBtn = $('.select-btn');
$selectBtn.addClass('btn-default');
$selectBtn.removeClass('btn-success');
$(this).removeClass('btn-default');
$(this).addClass('btn-success');
$('#selected_value').val($(this).data('value'));
})
})
</script>
I'm testing this in JSFiddle and run well:
BODY
<!-- Popover Link -->
<div class="container-fluid">
Popover HTML tags
</div>
<!-- Popover DIV content -->
<div id="popover_content_wrapper" style="display: none">
<div class="row">
<div class="col-sm-4"><span class="glyphicon glyphicon-user"></span></div>
<div class="col-sm-8">Username</div>
</div>
<div class="row">
Close
</div>
</div>
SCRIPT
$(function(){
$('[rel=popover]').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
But in my webpage is unuseful...
JSFiddle
my testing page
A wild guess : You wonder why the popover not is automatically shown? You need to set the trigger option :
$(function(){
$('[rel=popover]').popover({
html : true,
trigger: 'hover', //<---here
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
forked fiddle .> http://jsfiddle.net/q8CV4/
You probably need to import the bootstrap script and css.
Insert the following at the end of your <body></body>.
<body>
...
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
Bootstrap CDNS
Is it possible to have different loading message on a given page in jQuery Mobile?
I'm using mobile.loadingMessage and I also tried mobile.showPageLoadingMsg but I couldn't find the answer for this.
Below is what I have for the message to show up across the app:
$(document).bind('mobileinit',function(){
$.extend($.mobile, {
loadingMessage: "We're processing your request. We won't be long. Just Like Great Food, a good hotspot takes time to (find) prepare for you....",
pageLoadErrorMessage: 'Sorry, there was an error while loading!',
});
$.mobile.page.prototype.options.addBackBtn = true;
});
You can listen for pageshow event and set the loading message specific to that page.
Sample code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$("#page1").live("pageshow",function(){
$.mobile.loadingMessage = "Loading message for page1";
});
$("#page2").live("pageshow",function(){
$.mobile.loadingMessage = "Loading message for page2";
});
$(".showBtn").live("click",function(){
$.mobile.showPageLoadingMsg();
setTimeout(function(){$.mobile.hidePageLoadingMsg()},2000);
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page1</h1>
</div><!-- /header -->
<div data-role="content">
<a data-role="button" class="showBtn">Show loading message</a>
<a data-role="button" href="#page2">Go to page 2</a>
</div>
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page2</h1>
</div><!-- /header -->
<div data-role="content">
<a data-role="button" class="showBtn">Show loading message</a>
<a data-role="button" href="#page1">Go to page 1</a>
</div>
</div>
</body>
</html>
A demo here - http://jsfiddle.net/SugTr/
Edit - An alternate version that uses a single pageshow listener for all pages and targets each page using switch statements - http://jsfiddle.net/SugTr/1/
Edit 2 -The loading message will be shown by the jqm framework,only if you are trying to load a page which has been created as a separate html file.If you have all your data-role="page" divs within a single page,that means jqm framework will not show any loading message.However you can manually show it in the pagebeforeshow handler using $.mobile.showPageLoadingMsg() and hide in the pageshow handler using $.mobile.hidePageLoadingMsg().But this does not make any noticeable change because the time duration for which the message stays on screen will be negligible.
Now coming to the case where actually a page loading message is being shown(you are loading a separate html),you can have specific loading messages by setting the $.mobile.loadingMessage just before the page is being loaded.
The anchor tag can be something like this
<a data-role="button" id="gotopage2" href="#'>Go to page 2</a>
and the corresponding script of this form
$("gotopage2).live("click",function(){
$.mobile.loadingMessage = "Loading message for page1";
$.mobile.changePage("page2.html");
});
Let me know if that helps.
This is my alternative method of page loading message using simple javascript and html elements.
My Blog:
http://aspnetsample.blogspot.in/2012/09/page-loading-message-javascript-main.html
You can visit my blog for the full article.
Sample Code Here:
$function getpage(val)
{
hideFrame();
var mframe;
mframe=document.getElementById("MyFrame");
mframe.src=val;
mframe.onload=function()
{
document.getElementById("MyFrame").style.display="block";
document.getElementById("loadingDiv").style.display="none";
}
}
function hideFrame()
{
document.getElementById("MyFrame").style.display="none";
document.getElementById("loadingDiv").style.display="block";
}
function showFrame()
{
document.getElementById("MyFrame").style.display="block";
document.getElementById("loadingDiv").style.display="none";
}
function showdiv()
{
document.getElementById("loadingDiv").style.display="block";
}
function changeHome(val)
{
window.location=val;
}
$ <table>
<tr>
<td>
<div class="menu_div" onclick="getpage('http://www.aspnetsample.blogspot.in')">
Page1
</div>
</td>
<td>
<div class="menu_div" onclick="getpage('http://www.w3schools.com/css/default.asp')">
Page2
</div>
</td>
<td>
<div class="menu_div" onclick="getpage('page2.aspx')">
Page3
</div>
</td>
<td>
<div class="menu_div" onclick="changeHome('page3.aspx')">
Page4
</div>
</td>
</tr>
</table>
$ <iframe class="iframe" id="MyFrame" src="http://www.w3schools.com" onprerender="javascript:showdiv()"
onload="javascript:showFrame()" style="display: none;"></iframe>
<div id="loadingDiv" class="loadingDiv">
<table style="width: 100%; height: 100%;">
<tr>
<td align="center" valign="middle">
Page is Loading...
</td>
</tr>
</table>
</div>
You have to remove that $ symbol while implementation.
To get the complete code visit my Blog