I have many image icon on my page which have Tooltip on it and show different text in tooltip. I want to show each tooltips when user click on its image icon not on hover. and also when user click on any other place or area of page tooltip also hide or disappear.
<img style="width:26px; height: 23px;" class="customTooltip" data-toggle="tooltip" data-html="true" title="" src="/images/alert.png" data-original-title="Number Typ and Service Type:">
You can do it using bootstrap
<b-button id="tooltip-target-1">
Click Me
</b-button>
<b-tooltip target="tooltip-target-1" triggers="click">
I am tooltip <b>component</b> content!
</b-tooltip>
No need to reinvent the wheel. You can use third party library like TippyJs:
tippy(".item", {
trigger: 'click',
content: `item info`,
allowHTML: true,
animation: 'fade',
onShow(instance) {
let element = instance.reference;
instance.setContent(element.getAttribute('data-info'));
//console.log(instance);
},
});
img {
margin: 2rem
}
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<img class='item' src="https://picsum.photos/id/4/150/100" data-info="item info 1">
<img class='item' src="https://picsum.photos/id/2/150/100" data-info="item info 2">
My JQuery solution without any other js libs for custom tooltip:
<script>
$(document).ready(function() {
var noHideTooltip = false;
$(document).click(function(e) {
if (!noHideTooltip) {
$('.tooltip-box-show').removeClass('tooltip-box-show');
}
});
$(document).on('click', '.tooltip-box', function(e) {
$('.tooltip-box-show').removeClass('tooltip-box-show');
$(this).addClass('tooltip-box-show');
noHideTooltip = true;
setTimeout(function() { noHideTooltip = false; }, 0);
});
});
</script>
.tooltip-text {display:none; background:#ccc;}
.tooltip-box-show ~ .tooltip-text {display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/OOjs_UI_icon_alert_destructive.svg/120px-OOjs_UI_icon_alert_destructive.svg.png" class="tooltip-box"><span class="tooltip-text">Text here..</span
Just add your css tooltip style
Related
Hi i have code like this:
$(document).ready(function() {
$("#toggle").click(function() {
var elem = $("#toggle").text();
if (elem == "Show more") {
$("#toggle").text("Show less");
$("#text").slideDown();
} else {
$("#toggle").text("Show more");
$("#text").slideUp();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="btn-container">
<button id="toggle">Show more</button>
</div>
In show more i would like to add a icon /f078 and in show less /f106.
How to add? I tried by css and html tags but it doesnt work.
I want to show a block 5 seconds after clicking the button. My current code doesn't work. What's the problem?
if ($('#identify').click(function() {
setTimeout(function() {
document.getElementById('block1').classList.remove('hide');
}, 5000);
}));
.hide {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="identify" class="btn btn-primary" style="padding: 10px;">Identify</button>
<div class="slideRight expandUp hide" id="block1">Text Appears</div>
Event handlers in JS don't work as you're expecting; ie. by checking state in if conditions.
Instead you should attach event handler functions to the elements which will run when the specific event occurs. This is how your code should be structured:
jQuery($ => {
$('#identify').on('click', function() {
setTimeout(function() {
$('#block1').removeClass('hide');
}, 5000);
});
});
.hide { display: none; }
#identify { padding: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="identify" class="btn btn-primary">Identify</button>
<div class="slideRight expandUp hide" id="block1">Text Appears</div>
Note the inclusion of a document.ready handler in the above code, and also moving the inline CSS in to the stylesheet.
Try this code:
$(document).ready(function(){
$('#identify').click(function() {
setTimeout(function(){
document.getElementById('block1').classList.remove('hide');
}, 5000);
});
});
Below code will show taht div immediate and then it hide the text and then it reappers after 5 sec as in your question.
<script>
$('#identify').click(function() {
$("#block1").removeClass('hide');
setTimeout(function(){
$("#block1").addClass('hide');
}, 1000);
setTimeout(function(){
$("#block1").removeClass('hide');
}, 6000);
});
</script>
I have a "What's New" page on my website, and I want users to be able to hide and show the post using a button/a href link text. The code has been edited into the post below.
HTML:
<p>Post name</p>
<button class="visi" onclick="toggleVis()">+</button>
<div id="post-container" hidden>
<p class="post-text">Test sample paragraph = srve function private</p>
<img src="error.jpeg" alt="error" style="width:auto;height:200px">
</div>
JavaScript:
function toggleVis() {
var x = document.getElementById("post-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
CSS:
.visi {
width:auto;
-webkit-border-radius:10px;
height:auto;
background-color:#79E119;
border:5px solid #FFFFFF;
}
Surround the entire blog post with a <div> element, and use jQuery's .toggle() function to show and hide it when users click on a related link or button.
HTML:
<div id="clickme">
Click here
</div>
<div id="blogpost"><h3>my blog title</h3><p>my blog content</p></div>
Javascript:
$( "#clickme" ).click(function() {
$( "#blogpost" ).toggle( "slow", function() {
// Animation complete.
});
});
I have the following HTML code:
<button>good</button><br>
<button>bad</button><br>
<div class="new" style = "display: none;">booknow</div>
<div class="old">
welcome.
</div>
and the following JavaScript code:
<script>
$(document).ready(function() {
$("button").click(function() { /*button click event*/
$(".new").toggle(); /*new class calling */
});
});
</script>
How can I toggle the visibility of the div(s) with class new whenever a button is clicked?
Try below
$(document).ready(function(){
$("button.good").click(function(){
$(".new").toggle();
});
$("button.bad").click(function(){
$(".old").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="good">Good</button><br>
<button class="bad">Bad</button><br>
<div class="new">booknow</div>
<div class="old">welcome.</div>
How would you make it when a button is clicked the image that the button is made of will change?
#button {
text-align:center;
float:left;
}
#button:focus {
text-align:center;
float:left;
background-image: url('qmb2.png');
}
<input type="image" src="qmb.png" name="saveForm" class="btTxt submit" id="button" height="49.5px" padding = "0px" />
Using jQuery
$("#flowers").click(function () {
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("data-swap");
_this.attr('src', swap).attr("data-swap", current);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id='flowers' class="full" src='http://www.rachelgallen.com/images/snowdrops.jpg' width="500" height="400" data-swap='http://www.rachelgallen.com/images/daisies.jpg' width="500" height="400" />
Using Javascript
img{height:400px; width:500px}
<script>
function swap()
{
if (document.pic.src=='http://www.rachelgallen.com/images/snowdrops.jpg'){
document.pic.src='http://www.rachelgallen.com/images/daisies.jpg';
}
else if (document.pic.src=='http://www.rachelgallen.com/images/daisies.jpg'){
document.pic.src='http://www.rachelgallen.com/images/snowdrops.jpg';
}
}
</script>
<img src="http://www.rachelgallen.com/images/snowdrops.jpg" name="pic" onclick="swap()"/>
Using pure mouseover/mouseout
img{height:400px; width:500px}
<img src="http://www.rachelgallen.com/images/daisies.jpg"
onMouseOver="this.src='http://www.rachelgallen.com/images/snowdrops.jpg';"
onMouseOut="this.src='http://www.rachelgallen.com/images/daisies.jpg';">
Here is pure JavaScript, if JQuery is out of the question...
<input type="image" id="button" name="img" src="firefox.ico" width="50" />
<script>
document.getElementById("button").addEventListener("click", function(){
this.setAttribute("src", "chrome.ico");
});
</script>
Not that I have something against Rachel's answer on pure JavaScript use, but I just feel there could be something more reader-friendly written to toggle the image, such as:
document.getElementById("button").addEventListener("click", function(){
var path;
if(this.getAttribute("src") === "firefox.ico")
path = "chrome.ico";
else
path = "firefox.ico";
this.setAttribute("src", path);
});
IMO is a little bit cleaner-ish, and it's really not advised to use onclick properties in html, but rather implement listeners via JavaScript.
Jquery, when you click first time the class cliked will be added.
$(document).ready(function(){
$('button').on('click', function(){
$(this).toggleClass('clicked');
});
});
And css:
Button{
Background: img1.jpg;
}
Button.clicked{
Background: img2.jpg;
}