Буфер обмена. js две кнопки с двумя разными подсказками - PullRequest
0 голосов
/ 19 февраля 2020

Подсказка с двумя кнопками с тем же текстом сообщения, но мне нужен другой текст сообщения - проверьте по этой ссылке

Буфер обмена с двумя кнопками. js Подсказка с тем же текстом сообщения, но я нужны два разных текста сообщения, когда появляется всплывающее сообщение. Пожалуйста, проверьте на веб-сайте в реальном времени, я добавил ссылку выше. Два кнопки буфера обмена. js всплывающая подсказка с тем же текстом сообщения, но мне нужно два разных текста сообщения, когда появляется всплывающее сообщение. Пожалуйста, проверьте на сайте в реальном времени, я добавил ссылку выше.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
// Tooltip

$('button').tooltip({
  trigger: 'click',
  placement: 'bottom'
});

function setTooltip(btn,message) {
  btn.tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}

function hideTooltip(btn) {
  setTimeout(function() {
    btn.tooltip('hide');
  }, 10000);
}

// Clipboard

var clipboard = new Clipboard('button');

clipboard.on('success', function(e) {
  var btn = $(e.trigger);
  setTooltip(btn,'Email Address Copied - Please Send us an Email');
  hideTooltip(btn);
});

clipboard.on('error', function(e) {
  var btn = $(e.trigger);
  setTooltip('Failed!');
  hideTooltip(btn);
});
</script>
.btn:hover{
background-color: #ff6c45!important;
}
button {
	text-transform: none;
}

button {
	cursor: pointer;
	-webkit-appearance: button
}

button::-moz-focus-inner {
	padding: 0;
	border: 0
}


button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit
}

button {
	background-image: none
}

.btn {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 10px;
    margin-top: 25px;
    margin-right: 15px;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.428571429;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none
}

.btn:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px
}

.btn:hover,
.btn:focus {
	color: #333;
	text-decoration: none
}

.btn:active {
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
}

.btn-primary {
	color: #fff;
	background-color: #428bca;
	border-color: #357ebd
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	color: #fff;
	background-color: #3276b1;
	border-color: #285e8e
}

.btn-primary:active {
	background-image: none
}

@font-face {
	font-family: 'Glyphicons Halflings';
	src: url('../fonts/glyphicons-halflings-regular.eot');
	src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg')
}

@-ms-viewport {
	width: device-width
}
.tooltip{position:absolute;z-index:1030;display:block;font-size:12px;line-height:1.4;opacity:0;filter:alpha(opacity=0);visibility:visible}.tooltip.in{opacity:.9;filter:alpha(opacity=90)}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;text-decoration:none;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-color:#000;border-width:0 5px 5px}@-ms-viewport{width:device-width}@media screen and (max-width:400px){@-ms-viewport{width:320px}}
<button style="border-width: 2px;
border-style: solid;
background-color: transparent;
border-color:#ff6c45;
color:black;
padding: 10px 18px;
text-transform: uppercase;letter-spacing:1px" class="btn btn-primary" data-clipboard-text="hiretalent@zzrecruitment">Employers <hr style="margin: 0;border: 0">
<span style="font-size:10px">Working To Hire Top Talent</span></button>
<button style="border-width: 2px;
border-style: solid;
background-color: transparent;
color:black;
border-color:#ff6c45;
padding: 10px 18px;
text-transform: uppercase;letter-spacing:1px" class="btn btn-primary" data-clipboard-text="submitresume@zzrecruitment">Candidates<hr style="margin: 0;border: 0"><span style="font-size:10px">Click To Submit Your Resume</span></button>
...