Skip to content

Instantly share code, notes, and snippets.

@TheGP
Created April 7, 2014 07:32
Show Gist options
  • Select an option

  • Save TheGP/10016117 to your computer and use it in GitHub Desktop.

Select an option

Save TheGP/10016117 to your computer and use it in GitHub Desktop.
<div class="introjs-tooltip" style="bottom: 90px; left: 31px">
<div class="introjs-tooltiptext">
Эта панель видна только вам. Через нее можно быстро редактировать или сбросить таймер. А еще ее можно перетащить в любое место экрана взяв за <img src="http://protimer.makedreamprofits.ru/widget/move.png" width="15" style="margin-bottom: -2px">
</div>
<div class="introjs-arrow bottom"></div>
<div class="introjs-tooltipbuttons">
<a href="javascript:void(0);" class="introjs-button introjs-nextbutton">Понятно!</a>
</div>
</div>
<style>
.introjs-tooltip {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
position: absolute;
padding: 10px;
background-color: white;
min-width: 200px;
max-width: 300px;
border-radius: 3px;
box-shadow: 0 1px 10px rgba(0,0,0,.4);
-webkit-transition: opacity 0.1s ease-out;
-moz-transition: opacity 0.1s ease-out;
-ms-transition: opacity 0.1s ease-out;
-o-transition: opacity 0.1s ease-out;
transition: opacity 0.1s ease-out;
}
.introjs-arrow.bottom {
bottom: -10px;
border-top-color: white;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
.introjs-arrow {
border: 5px solid white;
content: '';
position: absolute;
}
.introjs-tooltipbuttons {
text-align: right;
}
.introjs-skipbutton {
margin-right: 5px;
color: #7a7a7a;
}
.introjs-button {
position: relative;
overflow: visible;
display: inline-block;
padding: 0.3em 0.8em;
border: 1px solid #d4d4d4;
margin: 0;
text-decoration: none;
text-shadow: 1px 1px 0 #fff;
font: 11px/normal sans-serif;
color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
background-image: -o-linear-gradient(#f4f4f4, #ececec);
background-image: linear-gradient(#f4f4f4, #ececec);
-webkit-background-clip: padding;
-moz-background-clip: padding;
-o-background-clip: padding-box;
/* background-clip: padding-box; */
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
zoom: 1;
margin-top: 10px;
}
.introjs-nextbutton {
-webkit-border-radius: 0 0.2em 0.2em 0;
-moz-border-radius: 0 0.2em 0.2em 0;
border-radius: 0 0.2em 0.2em 0;
}
</styles>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment