<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="jQuery Tooltip Basic plugin demo page">
  <meta name="author" content="Emre Pişkin">
  <title>jQuery Tooltip Basic plugin demo by Emre Pişkin</title>

  <!-- Google font -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
  <!-- Basic CSS file -->
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!-- Our CSS file for the plugin -->
  <link rel="stylesheet" type="text/css" href="../css/jquery.tooltip.basic.min.css">

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <!-- Our plugin: jQuery Tooltip Basic plugin by Emre Pişkin -->
  <script type="text/javascript" src="../src/jquery.tooltip.basic.min.js"></script>

  <script type="text/javascript">

    /* ================
     *  DEMO FUNCTIONS
     * ================ */

    function calculateHeight() {
        return "Window height: <b>" + $(window).height()
            + "</b>px<br> Resize the window without refreshing, so that you can measure the actual height. "
            + "This javascript function works 'on hover'.";
    }

    function getTime() {
        var dt = new Date();
        var time = dt.getHours() + ":"
            + (dt.getMinutes() < 10 ? '0' : '') + dt.getMinutes() + ":"
            + (dt.getSeconds() < 10 ? '0' : '') + dt.getSeconds();
        return "Time: <b>" + time
            + "</b><br> This time data doesn't change because 'functionOnce' option was used.";
    }

    $(document).ready(function () {

      /* ===============
       *  DEMO EXAMPLES
       * =============== */

        $("#first").tooltip({
            value: '<b>Tohumdan</b> yetiştirilip başka yerlere dikilmek için hazırlanan sebze veya körpe çiçek.'
        });
        $("#second").tooltip({
            value: 'Kök, kara hayatına uymuş olan gelişmiş bitkilerde, genel olarak toprak içerisine doğru büyüyen ama nadiren toprak üstünde de bulunan bir organdır.',
            class: 'green',
            position: 'bottom',
            width: '300px'
        });
        $("#third").tooltip({
            value: 'Ağaçların gövdelerinde mevsimlere göre oluşan şekil. Bir ağacın halkaları sayılarak yaşı bulunabilir. Mobilyacılıkta, yaş halkaları dar olan ağaçlar daha üstün tutulur.',
            class: 'blue',
            position: 'left',
            animation: 'fade'
        });
        $("#fourth").tooltip({
            value: 'http://tr.m.wikipedia.org/wiki/Kabuk',
            type: 'url',
            position: 'top',
            animation: 'fade',
            width: '500px'
        });
        $("#fifth").tooltip({
            value: 'Hücre ya da öz, bir canlının yapısal ve işlevsel özellikler gösterebilen en küçük birimidir. Hücre, Latince küçük odacık anlamına gelen "cellula" kelimesinden Robert Hooke tarafından türetilmiştir.',
            position: 'top',
            animation: 'shake',
            width: '400px'
        });
        $("#sixth").tooltip({
            value: '#description',
            type: 'selector',
            width: '400px'
        });
        $("#seventh").tooltip({
            value: 'calculateHeight',
            type: 'function',
            position: 'top',
            width: '380px'
        });
        $("#eighth").tooltip({
            value: 'getTime',
            type: 'functionOnce',
            position: 'top',
            width: '380px'
        });
    });
  </script>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-12"><img src="img/tree.png" width="363" align="right" alt="Tree">
      <small>jQuery Tooltip Basic plugin demo by Emre Piskin. <a href="https://github.com/pemre/jquery-tooltip-basic"
                                                              target="_blank">Go to the plugin page</a></small>
      <h1>Ağaç</h1>
      <p>
        Toprağa düşen tohumdan en önce <span id="first">fide</span> meydana gelir. Fide bir yıl sonra fidan hâlini alır.
        Hücrelerinin çoğalmasıyla dal ve yapraklar, gövde ve <span id="second">kök</span> olarak üç parçadan ibaret bir
        ağacın küçük bir modeli olur. Her yıl ağacın dallarında ve köklerinde yeni sürgünler çıkarken, gövdede de bir
        tane yıllık <span id="third">halka</span> meydana gelir. Bu halkalar, ağacın enine büyüyerek yaptığı odun
        tabakasıdır. Yağışı bol yıllarda, geniş bir halka; kurak geçen yıllarda ise, ince ve küçük bir halka meydana
        gelir. Bu halkalardan ağacın yaşı kolayca anlaşılabilir.</p>
      <p>Gövdesinden enine kesilen bir ağaç incelenecek olursa, en dışta kabuk, sonra yıllık halkaları meydana getiren
        hücre tabakaları ve en içte de öz kısım görülür.</p>
      <p>Bir ağacın gerçekten canlı olan biricik kısmı, <span id="fourth">kabuğun</span> altında odunun yüzeyindeki ince
        bir <span id="fifth">hücre</span> tabakasıdır. Buna <span id="sixth">katman</span> doku tabakası (kambiyum,
        soymuk) denir. Bu tabaka ağacı geliştiren ve büyümesini sağlayan tabakadır. Genç bir ağaca çivi çakıldığında
        veya ağaç bir dal verdiğinde, çivinin ve dalın yerden <span id="seventh">yüksekliği</span> hiç <span
            id="eighth">değişmez</span>.</p>
      <hr/>
      <div id="description">
        <table border="0">
          <thead>
          <tr>
            <th scope='col'><b>katman </b> <br><i>isim</i></th>
          </tr>
          </thead>
          <tr>
            <td>
              <b>1. </b><i>isim -</i> Birbiri üzerinde bulunan yassıca maddelerin her biri, tabaka
            </td>
          <tr>
            <td>
              <b>2. </b><i>jeoloji -</i> Altında veya üstünde olan kayaçlardan gözle veya fiziksel olarak
              az çok ayrılabilen, kalınlığı 1 santimetreden az olmayan tortul kayaç birimi, tabaka
            </td>
          <tr>
            <td>
              <b>3. </b><i>toplum bilimi -</i> Bir toplum içinde makam, şöhret, meslek vb. bakımdan
              ayrılan topluluklardan her biri, tabaka
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
</body>