Рубрики
Web development

Web development «ToolTip»

  • 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>
  • 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>
      • </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>
      • </div>
    • </span>
  • </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);
  • }

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *