Tooltip on button click Vue.js - javascript

I want to show a tooltip with the message "Copied!" when the button is clicked and make it disappear after a few seconds. Most of the answers I saw was using jQuery, is there a way to make it on Vue.js without too much resources?
My button is made and already have a function that onClick copy a code and I can use this function to show the tooltip as well.
I was thinking in something like this:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>
</body>
</html>
copyClick(code) {
const payload = {
document: --- ,
id: ---,
status: ---,
}
Service.saveEvent ({payload});
ClipboardService.copy(code)
}

You can try like in following snippet:
new Vue({
el: '#demo',
data() {
return {
tool: false,
text: "Copied!"
}
},
methods: {
showTool() {
this.tool = true
setTimeout(() => this.tool = false, 3000)
},
copyClick() {
this.showTool()
// your code
}
}
})
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -.5rem;
right: -8rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" style="text-align:center;">
<button #click="copyClick">Copy</button>
<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div #mouseover="showTool" class="tooltip">Hover over me
<span v-show="tool" class="tooltiptext">{{ text }}</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>
</div>

Related

How can I add a tooltip when mouse is over an item?

I want wen I click on first paragraph, the element with id « envoie » shows up as a tooltip and disappear when mouse leave.
What I have is the tooltip is display une the first element. I mean when I click on the last « first element », the tooltip is still under the first element.
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
margin: 5px;
}
.envoie-fr, .ship-fr {
margin-top: -25px;
opacity: 1;
z-index: 2000;
visibility: visible;
.transition(all 0.1s linear);
}
</style>
<script>
window.addEventListener("load", () => {
var x = document.querySelectorAll("#envoie");
console.log(x.length);
});
</script>
</head>
<body>
<div>
<div>
<p class="#envoie">First Paragraph</p>
<div id="envoie" class="envoie-fr">Envoie</div>
</div>
<div>
<p class="#ship">Second Paragraph</p>
<div id="ship" class="ship-fr">Ship</div>
</div>
</div>
<hr />
<div>
<div>
<p class="#envoie">First Paragraph</p>
<div id="envoie" class="envoie-fr">Envoie</div>
</div>
<div>
<p class="#ship">Second Paragraph</p>
<div id="ship" class="ship-fr">Ship</div>
</div>
</div>
<div>
<p class="#example" style="margin-top:50px">Bottom</p>
</div>
</body>
</html> ```
var myDiv = document.getElementById('foo');
myDiv.onmouseenter = function() {
// do your stuff to show element like display:block;
alert('entered');
}
myDiv.onmouseout = function() {
// do your stuff to hide element like display:none;
alert('left');
}
You can use the title tag as a tooltip to the HTML element.
You do not need any script to make that happened. Also, from your issue title I can tell that you want the tooltip be displayed on hover (not on click) and disappeared when the mouse is away (this is how actually tooltips work). So, here is the code for you:
<!DOCTYPE html>
<html>
<head>
<style>
body {
/*optional: these are to make the content centered*/
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div {
/*optional*/
border: solid 1px #f9cd23;
padding: 30px;
}
p {
padding: 0;
cursor: pointer;
position: relative;
margin: 40px 0;
}
/*for the tooltip box*/
p:hover:after {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: #f9cd23;
border-radius: 8px;
color: black;
content: attr(title);
text-align: center;
font-size: 16px;
padding: 8px;
width: 200px;
}
/*for the tooltip triangle*/
p:hover:before {
left: 50%;
transform: translateX(-50%);
top: -20px;
position: absolute;
border: solid;
border-color: #f9cd23 transparent;
border-width: 15px 15px 0 15px;
content: '';
}
</style>
</head>
<body>
<div>
<p title="This is the first paragraph tooltip...">First Paragraph</p>
<p title="This is the second paragraph tooltip...">Second Paragraph</p>
</div>
</body>
</html>

Show and hide tooltips with CSS and Javascript

I use CSS to show and hide tooltips when I hover over them. Now I need this to work for mobile devices with a click function. I got the first tooltip running through toggling a class via Javascript. How can I apply that function for all tooltips now? I have around 30 to 40. Any idea how I can achieve my goal?
document.getElementById("website-tooltip-container").addEventListener("click", function() {
var element = document.getElementById("test");
element.classList.toggle("website-tooltiptext-visible");
});
/* Tooltip Container */
.website-tooltip {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
color: #666;
}
/* Tooltip text */
.website-tooltip .website-tooltiptext {
visibility: hidden;
max-width: 350px;
font-family: open sans;
font-size: 13px;
line-height: 22px;
background-color: #FFFFFF;
color: #666;
text-align: left;
padding: 11px 15px 11px 15px !important;
border-radius: 3px;
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 100%;
margin: 0px 0px 0px 0px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.website-tooltip:hover .website-tooltiptext {
visibility: visible;
}
/* Hide when hovering over tooltip div */
div.website-tooltiptext:hover {
display: none;
}
/* Toggle this class to show Tooltip on click via Javascript */
.website-tooltiptext-visible {
visibility: visible !important;
display: block !important;
}
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
Thanks for your help!
use an extra class.
add this to your css:
.website-tooltiptext-visible {
visibility: visible !important;
}
and replace this class inside your js code:
element.classList.toggle("website-tooltiptext-visible");
PS: NEVER use same id for multiple HTML elements. like ever!
EDIT: use below javascript code to select by class
Array.from(document.getElementsByClassName("website-tooltiptext")).forEach(
(element) => {
element.addEventListener("click", () => {
element.classList.toggle("website-tooltiptext-visible");
});
}
);

CSS Expand / Contract Animation to Show/Hide Content

I am trying to create a box that can expand and collapse with a simple slide out animation. If you run the example below, the idea is that it starts with one red line and when you click the button it separates into two read lines and gently expands to reveal the content like pulling a draw out of a table.
I've tried both transform, animation, relative: positioning with top, and i'm unable to get the desired effect.
The containing box should expand in size
function expandContract() {
const el = document.getElementById("expand-contract")
el.classList.toggle('expanded')
el.classList.toggle('collapsed')
}
#container {
border: 1px solid black;
padding: 15px;
}
#top-section {
border-bottom: 1px solid red;
}
#expand-contract {
border-bottom: 1px solid red;
}
.expand-contract {
transform: translateY(-100%)
overflow: hidden;
}
#keyframes slide-in {
100% {
transform: translateY(0%)
}
}
.expanded {
background-color: green;
animation-name: slide-in;
animation-duration: 1s;
}
.collapsed {
background-color: red;
transform: translateY(-100%)
}
<div id="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-contract" class="expanded">
This section expands and contracts
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
<div id="bottom-section">
This section is always displayed
</div>
</div>
<button onclick="expandContract()">Expand/Contract</button>
You can achieve this using the CSS transition along with toggled styles. Initially you may think to transition the height (from 0 to initial so that it expands dynamically based on height) but unfortunately CSS transition doesn't properly handle this.
Instead, you can wrap it in a container of its own with overflow: hidden and then use a margin-top: -100% to hide it, and 0 to show it.
Here is your code with this modification:
function expandContract() {
const el = document.getElementById("expand-contract")
el.classList.toggle('expanded')
el.classList.toggle('collapsed')
}
#container {
border: 1px solid black;
padding: 15px;
}
#top-section {
border-bottom: 1px solid red;
}
#expand-container {
overflow: hidden;
}
#expand-contract {
border-bottom: 1px solid red;
margin-top: -100%;
transition: all 1s;
}
#expand-contract.expanded {
background-color: green;
margin-top: 0;
}
<div id="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-container">
<div id="expand-contract" class="expanded">
This section expands and contracts
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
</div>
<div id="bottom-section">
This section is always displayed
</div>
</div>
<button onclick="expandContract()">Expand/Contract</button>
hope to help you
HTML
<div class="container">
<div id="top-section">
This is always displayed
</div>
<div id="expand-container">
<div class="expanded" id="expand-contract">
<table>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
</table>
</div>
</div>
</div>
<button class="header" onclick="expandContract()">Expand/Contract</button>
css
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .expanded {
display: none;
padding : 5px;
}
js
function expandContract() {
$header = $(".header");
$content = $("#expand-contract")
$content.slideToggle(500, function () {
$header.text(function () {
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
};
see here enter code here

Make element hover when unhovering, add close button so it remembers cookies?

I am trying to make a tooltip, but I need it to stay hovering when user unhovers.
Also, I am trying to add a close button to that tooltip, that will stay with the "hover state" and when user clicks on it, I want to make it to remember cookies so it will not open again for that cookie.
I am a novice at javascript and jQuery and have been breaking my mind on this for several days now.
Here is my code:
#charset "utf-8";
/* Tooltip CSS Created By Deni*/
.tooltip-container {
width: 400px;
height: 300px;
background: #DBDBDB;
border: 1px solid black;
margin: 10% auto;
}
/* Start the tooltip css */
.tooltip {
position: relative;
z-index: 9998;
cursor: help;
}
.tooltip > span {
display: none;
}
.tooltip:hover {
z-index: 9999;
}
.tooltip:hover .tooltip-data {
display: block;
width: 150px;
padding: 5px;
color: #dadada;
background-color: #A35FA1;
font-size: 11px;
border-radius: 5px;
text-decoration: none;
font-family: century gothic;
position: absolute;
bottom: 20px;
left: -10px;
text-align: center;
}
.tooltip-container > a {
margin-right: 10px;
}
.permhover {
display: block;
opacity: 1;
}
**HTML:**
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tooltip</title>
<link href="tooltip.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
</head>
<body>
<div class="tooltip-container">
This is the information<span class="tooltip-data"> This is one Tooltip!</span>
This is the information <span class="tooltip-data"> This another one Tooltip!</span>
</div>
</body>
</html>
I know that is not much but all the help is appreciated. Thank you very much.
First of all you need to change all lines in css from ".tooltip:hover" to ".tooltip.hover".
Next you need to add <button class="btn-close"></button> to your tooltip (this button will close this tooltip)
Then you need to add jquery code, that will add class hover to tooltip when you hover it.
(function(){
$('.tooltip').each(function(){
var tooltip = $(this);
var tooltipId = tooltip.attr('id');
if( !getCookie(tooltipId) ) {
tooltip.on('mouseenter.tooltip', function(){
tooltip.addClass('hover');
tooltip.find('.btn-close').on('click', function(){
var date = new Date();
date.setDate(date.getDate() + 1);
tooltip.removeClass('hover').off('mouseenter.tooltip');
document.cookie = tooltipId + "=true; path=/; expires=" + date.toUTCString();
});
});
}
});
function getCookie(name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
})();
A possible solution of this would be to register the onmouseout event on the links and display your tooltip.
You could add a x by adding a span to the .tooltip-data.
Then use jQuery to active the tooltip on mousehover and remove it by a click on the x span.
$(function() {
$('.tooltip').on('mouseover', function() {
$(this).find('span').show().append('');
});
$('.tooltip-data span').on('click', function() {
$(this).parent().hide();
});
});
#charset "utf-8";
/* Tooltip CSS Created By Deni*/
.tooltip-container {
width: 400px;
height: 300px;
background: #DBDBDB;
border: 1px solid black;
margin: 10% auto;
}
/* Start the tooltip css */
.tooltip {
position: relative;
z-index: 9998;
cursor: help;
}
.tooltip > span {
display: none;
}
.tooltip:hover {
z-index: 9999;
}
.tooltip-data {
display: block;
width: 150px;
padding: 5px;
color: #dadada;
background-color: #A35FA1;
font-size: 11px;
border-radius: 5px;
text-decoration: none;
font-family: century gothic;
position: absolute;
bottom: 20px;
left: -10px;
text-align: center;
}
.tooltip-data span {
float: right;
}
.tooltip-container > a {
margin-right: 10px;
}
.permhover {
display: block;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip-container">
<a href="javascript:;" class="tooltip">
This is the information
<span class="tooltip-data"> This is one Tooltip! <span> x </span></span>
</a>
<a href="javascript:;" class="tooltip">
This is the information
<span class="tooltip-data"> This another one Tooltip!<span> x </span></span>
</a>
</div>

Reset div to its original position after click

I have this application that shows small windows after clicking a button
JsFiddle
$('.modules').draggable();
$('.glyphicon').click(function() {
$(this).next('.modules').slideToggle();
});
.glyphicon {
font-size: 2em;
color: #A70000;
position:absolute;
z-index: 10;
display: block;
}
.glyphicon:hover {
cursor: pointer;
color: #000;
}
.modules{
position: absolute;
width: 30%;
box-shadow: 5px 5px 15px #000;
z-index: 5;
display: none;
overflow: hidden;
}
.modules_box {
color: white;
background-color: rgba(159,159,159,0.8)
}
.module img{
padding: 5px;
}
#module1 {
left: 10%;
top: 7%;
}
#button_module1 {
left: 10%;
top: 7%;
}
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="button_module1" class="glyphicon glyphicon-info-sign"></span>
<div class="modules" id="module1" draggable="true">
<img src="http://www.touronline.ag/Portals/0/Products/alle_module.jpg" alt=""/>
<div class="modules_box">
<h5>DANE:</h5>
<ul>
<li>Parametr 1: 500</li>
<li>Parametr 2: 700</li>
<li>Parametr 3: 1500 cm</li>
</ul>
</div>
</div>
Windows are draggable so a user can move them around. What I want to achieve is to reset the window position after it's hidden so it always shows at its origin. I would like the universal solution that doesn't require writing separate code for every window. There will be many windows placed at different spots using absolute position. Any suggestions how this could be achieved?
Resetting the 'style' attribute on toggle will ensure the module always reverts to it's original position in the stylesheet.
if(!$this.is(":visible")){
$this.attr('style','');
}
http://jsfiddle.net/vrww6fcm/3/

Categories