保持qTip工具提示始终可见

Keep qTip Tool Tip Always Visible

本文关键字：qTip 工具提示 保持      更新时间：2023-09-26

我使用qTip2来处理我网站上的一些工具提示。我在它应用的页面的模板中有以下代码:

<div class="overview"><a href="#"><img class="border-gray" src="src.jpg"></a></div>
<div class="estimate"><a href="#"><img class="border-gray" src="src.jpg"></a></div>
<!-- More HTML similar to above -->

JS 

$('.overview').qtip({
  content: 'Overview',
  position: {
    my: 'bottom center', 
    at: 'top center'
  },
   style: {classes: 'qtip-tipsy'}
});
$('.estimate').qtip({
   content: 'Estimating',
   position: {
     my: 'bottom center', 
  at: 'top center'
  },
   style: {classes: 'qtip-tipsy'}
});
//More JS as above

在单个页面上，如果类与页面相关，我希望工具提示可见。IE: site.com/overview将具有overview类始终可见的工具提示。如site.com/estimate有工具提示estimate可见。

我已经尝试将此代码添加到页面，但它不工作:

$('.overview').qtip({
   hide: false
});

我想要的是当页面加载时工具提示是可见的。不需要鼠标等。可见的工具提示将取决于可见的页面。IE: /overview = .overview工具提示。

我怎样才能做到这一点?

下面的代码将实现我正在寻找的:

$('.overview').qtip({
   content: 'Overview',
   position: {
     my: 'bottom center', 
     at: 'top center'
},
  show: {
    ready: true
},
  hide: false,
  style: {classes: 'qtip-tipsy'}
});

然而，这部分代码是在模板中，不能在页面级别上编辑:

$('.overview').qtip({
  content: 'Overview',
  position: {
    my: 'bottom center', 
    at: 'top center'
  },
   style: {classes: 'qtip-tipsy'}
});

如果我在上面的代码下面尝试这个，它不工作:

$('.overview').qtip({
    show: { ready: true },
    hide: false
});

如果其中一个在页面级别上不可编辑，我如何将两者结合起来?IE:如果我不能在页面级别上编辑代码，我该如何将show和hide代码添加到上述代码中?

默认显示 

$('.overview').qtip({
  content: 'Overview',
  position: {
      my: 'bottom center', 
      at: 'top center'
    },
  style: {classes: 'qtip-tipsy'},
  show: { ready: true }
  });

这是你需要的行:

show: { ready: true }

文档如下:
gTip: http://craigsworks.com/projects/qtip/docs/reference/显示
gTip2: http://craigsworks.com/projects/qtip2/docs/show/

显示条件 

<?php
  // Get the url
  $current_url = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
  // Get the two parts of the url, seperated by: /
  $url_array = explode('/', $current_url);
?>
<script>
  $('.overview').qtip({
    content: 'Overview',
    position: {
      my: 'bottom center', 
      at: 'top center'
    },
    /* Check if the second part of the url is 'overview'
       If it is, add the show ready code */
    <?php if( isset( $url_array[1] ) && $url_array[1] == 'overview' ) : ?>
      show: { ready: true },
    <?php endif; ?>
    style: {classes: 'qtip-tipsy'}
  });
</script>

有条件显示|仅JAVASCRIPT

<script type="text/javascript">
  $(document).ready(function() 
    {
      // Prepare some variables
      var current_url = window.location.host + window.location.pathname;
      var url_array = current_url.split('/');
      // The qtip code
      $('.overview').qtip({
        content: 'Overview',
        position: {
          my: 'bottom center', 
          at: 'top center'
        },
        show: { ready: url_array[1] == overview ? true : false },
        style: {classes: 'qtip-tipsy'}
      });
  });
</script>

 show: {
     ready: true
 },
 hide: {
     event: false
 }
相关文章：