Сделать подсказку для организационной диаграммы с помощью Jquery - PullRequest
Новая
       28

Сделать подсказку для организационной диаграммы с помощью Jquery

0 голосов
/ 05 сентября 2018

Я все еще новичок в javascript, а также Jquery. То, что я пытаюсь сделать, это всплывающее изображение с полным описанием при наведении курсора на блок организационной диаграммы. Через несколько дней я наконец-то нашел решение. Тем не менее, это работает только для одной коробки, которая находится наверху. Я пытаюсь сделать второе окно, чтобы выскочить изображение с полным описанием, но не получилось. Может быть, что-то не так в кодировании Jquery, но я до сих пор не могу найти решение. Любой хоть?

Это моя кодировка. Я надеюсь, что кто-то может помочь мне. Я все еще новичок и застрял на несколько дней. 

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" charset ="utf-8" content="width=device-width, initial-scale=1">


<link href='https://fonts.googleapis.com/css?family=Roboto:300italic,400italic,400,100,300,600,700' rel='stylesheet' type='text/css'>
  
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
 body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: ;
            background-color: #f1f1f1;
			 -webkit-font-smoothing: antialiased;
        }



.box-row {
  text-align: center;
}

.box {
  border: 4px solid #000000;
  height: 80px;
  width: 286px;
  display: inline-block; 
  top: 46px;	
}  

.box:hover  {
box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
	width: 296px;
	top:36px;
}

.box1 {
  border: 4px solid #000000;
  height: 80px;
  width: 286px;
  display: inline-block; 
  top: 46px;	

}

.box1:hover  {
box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
	width: 296px;
	top:36px;
}



.bar {
  width: 30px;
  transform: rotate(90deg);
  margin: 13px auto 13px auto;
  border: 2px solid #000000;
}

.bar2 {
  width: 84px;
  transform: rotate(90deg);
  margin: 39px auto -6px auto;
  border: 2px solid #000000;
}

.horizontal-bar {
  display: inline-block;
  width: 35px;
  margin-bottom: 20px;
  margin-left: -6px;
  margin-right: -5px;
  border: 2px solid #000000;
}

.box-group {
  display: inline-block;
  width: 48%;
}

.second {
  margin: 8px 10px;
}

.second-separator {
  width: 629px;
  margin-bottom: 55px;
  margin-right: 344px;
  border: 2px solid #000000;
}

.vertical-bar {
  width: 176px;
  margin-bottom: -55px;
  margin-top: 27px;
  transform: rotate(90deg);
  border: 2px solid #000000;
}
 
#tooltip {
    text-align: left;
    z-index: 100;
  border-radius: 2px;
  color: black;
  font-size: 14px;
  padding: 6px 10px;
    top: px;
  white-space: nowrap;
  height: 200px;
  width: 350px;
  position: absolute;
  left: 0;
  transform: translate(-50%, -100%);
  background: white;
  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.3);
    }
 
    #tooltip:after {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #111;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }
 
 
        #tooltip.left:after {
            left: 10px;
            margin: 0;
        }
 
        #tooltip.right:after {
            right: 10px;
            left: auto;
            margin: 0;
        }
		



    .mbt-tooltip {
        display: none;
        width: auto;
        max-width: 100% !important;
    } 
	

    

 @media screen and (max-width: 500px) {
            .header a {
                float: none;
                display: block;
                text-align: left;
            }
            .header-right {
                float: none;
            }
  
    }
	
</style>

</head>

<body>



    <div class="row">
        <div class="column" style="background-color:#;">
      
            <h2>STRUCTURE</h2>
            
  <br>
            <br>
            <br>
            <div class="box-row">
  <div>
    <div class="box">
    <p>Vice President</p>
    <p>Business Technology</p>
    <p>Aiman Iskandar</p>
     <div class="mbt-tooltip">
            <img src="image/nizam1.jpg" align="left">
        <ul> 
                <li>Aiman Iskandar</li>
                <br/>
                <li>54 Years Old</li>
                <br/>
                <li>Vice President</li>
            </ul>
        </div>
    </div>
    
    <hr class="bar" />
  </div>
  <div>
    <div class="box1">
  <p>Head</p>
  <p> Consulting & Technology Services</p>
  <p>aidil iman</p>
  <div class="mbt-tooltip">
            <img src="image/search.jpg" align="left">
        <ul> 
                <li>aidil iman</li>
                <br/>
                <li>51 Years Old</li>
                <br/>
                <li>CTS Services</li>
            </ul>
        </div>
    </div>

    <hr class="bar2" />
  </div>
  
  <br />
  <br />
  

  </div>
</div>

<div>

</div>

</div>
            
          </div>
          </div>



<script>
$( function() {

        var targets = $('.box'),
            tooltip = $('.mbt-tooltip'),
            title   = false;
     
        targets.bind( 'mouseenter', function()
        {
            tip     = targets.children('.mbt-tooltip');
            tooltip = $( '<div id="tooltip"></div>' );
     
            if( !tip || tip == '' )
                return false;
            
            //target.remove('.mbt-tooltip');
            //target.removeAttr( 'title' );
            tooltip.css( 'opacity', 0 )
                   
                   .html( tip.clone().show() )

                   .appendTo( targets );
     
            var init_tooltip = function()
            {
                if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                    tooltip.css( 'max-width', $( window ).width() / 2 );
                else
                    tooltip.css( 'max-width', 340 );
     
                var pos_left = targets.offset().left + ( targets.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                    pos_top  = targets.offset().top - tooltip.outerHeight() - 20;
     
                if( pos_left < 0 )
                {
                    pos_left = targets.offset().left + targets.outerWidth() / 2 - 20;
                    tooltip.addClass( 'left' );
                }
                else
                    tooltip.removeClass( 'left' );
     
                if( pos_left + tooltip.outerWidth() > $( window ).width() )
                {
                    pos_left = targets.offset().left - tooltip.outerWidth() + targets.outerWidth() / 2 + 20;
                    tooltip.addClass( 'right' );
                }
                else
                    tooltip.removeClass( 'right' );
     
                if( pos_top < 0 )
                {
                    var pos_top  = targets.offset().top + targets.outerHeight();
                    tooltip.addClass( 'top' );
                }
                else
                    tooltip.removeClass( 'top' );
     
                tooltip.css( { left: pos_left, top: pos_top } )
                       .animate( { top: '+=10', opacity: 1 }, 50 );
            };
     
            init_tooltip();
            $( window ).resize( init_tooltip );

     
           var remove_tooltip = function()
            {
                tooltip.animate( { top: '-=10', opacity: 0 }, 300, function()
                {
                    $( this ).remove();
                });

                targets.children('.mbt-tooltip', tip);
    
            };
            
            //**** ISSUE AREA ****//
            targets.bind( 'mouseleave', remove_tooltip );
            tooltip.bind( 'click', remove_tooltip );
        });
    });
</script>
  
    
   
<br>

    
</body>
</html>
...