保持qTip工具提示始终可见

我正在使用qTip2来处理我的网站上的一些工具提示。我有它适用于页面的模板中下面的代码：保持qTip工具提示始终可见

HTML

<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 -->

$('.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的工具提示。如的工具提示estimate可见。

我试图将此代码添加到网页，但它不工作：

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

当页面加载的工具提示是可见的什么我后。没有鼠标悬停等是必需的。可见的工具提示将取决于可见的页面。 IE：/overview = .overview工具提示。

我该如何做到这一点？

UPDATE

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

$('.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代码添加到上面的代码中？

来源

2013-01-18 L84

Uhmm。 *不*使用工具提示，而只是显示'div'？ –

@JustinSatyr - 为了一致，我更喜欢这种方法。 – L84

默认情况下显示

$('.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/#show
gTip2：http://craigsworks.com/projects/qtip2/docs/show/#ready

SHOWING有条件

<?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>

SHOWING有条件|只有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>

来源

2013-01-18 03:59:04

感谢您的帮助，这确实是我需要的正确代码，但是，我无法编辑部分代码，因为我在多个页面上的模板中进行了编辑。看到我的问题更新。 – L84

那么你可以编辑模板添加显示：{ready：true}，有条件地在我更新的答案？ –

是的，但是，我不能使用PHP（我正在使用托管CMS）。如果没有其他办法，我会放弃模板。额外的工作要做，但不是不可能的。 – L84

-2

show: { 
    ready: true 
}, 
hide: { 
    event: false 
}

来源

2014-01-06 17:34:58 Lhoussin

一些解释会很好.. –

它看起来像原来的海报（OP）已经表明，这是不工作的他们如果他们把它放在代码之后。至少这需要一些解释。 – RacerNerd

保持qTip工具提示始终可见

回答

相关问题