- 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-header
href=#
>Изменить</a> - <span>
- <div class=
tooltip
>- <a class=
tooltip-header
href=#
>АТРИБУТЫ</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-header
href=#
>МОДУЛИ</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(
- }