- header
- <script src=
https://code.jquery.com/jquery-1.12.4.js></script> - <script src=
https://code.jquery.com/ui/1.12.1/jquery-ui.js></script>
- <script src=
- CSS
- .tooltip span
- { display:none; position: absolute; z-index: 1001; margin-top:0px; }
- .tooltip a
- { display:block; width: 100px; text-decoration: none; }
- .tooltip:not(:hover)>span
- { display:none; }
- .tooltip:hover:after
- { width:10%; height:15px; position: absolute; z-index: 1001; margin-top:-17px; margin-left:1px; }
- html.body
- <div class=
tooltip>- <a class=
tooltip-headerhref=#>Изменить</a> - <span>
- <div class=
tooltip>- <a class=
tooltip-headerhref=#>АТРИБУТЫ</a> <span>test1</span>
- <a class=
- </div>
- <div class=»tooltip»>
- <a class=»tooltip-header» href=»#»>VARS</a> <span>test2</span>
- </div>
- <div class=
tooltip>- <a class=
tooltip-headerhref=#>МОДУЛИ</a> <span>test3</span>
- <a class=
- </div>
- <div class=
- </span>
- <a class=
- </div>
- script
- $(
.tooltip).hover(function() {- $(this).children(
:last-child).css(display,none) }); - $(
.tooltip-header).on(click,function(){tooltip_click()}); - function tooltip_click(){
- var span=$(window.event.currentTarget).next();
- if (span.css(
display)==none) span.css(display,block); - else span.css(
display,none); - span.css(
width,200px); - span.css(
background,white); - span.css(
padding,10px 10px); - span.css(
border,1px solid #220);
- $(this).children(
- }