我正在使用twitter bootstrap创建一个站点,并试图初始化工具提示.除了添加如下内容:
$("[rel=tooltip]").tooltip() 在application.js中,除非我保留,在bootstrap文档中使用以下代码,我的工具提示不会初始化.
!function ($) {
$(function(){
})
}(window.jQuery)
上面的代码是做什么的？
默认情况下,Bootstrap工具提示将文本对齐到中间.我想左边对齐.有没有什么好的方法在HTML中执行此操作,而不是修改CSS文件？
这是我的示例代码:
<p rel="tooltip" title="Text in tooltip I want to align">Hover over here</p>
<script type="text/javascript">
$(document).ready(function () {
$("p").tooltip();
});
</script>
我已经尝试但它没有用:
<p rel="tooltip" data-html="true" title="<p align='left'>Text in tooltip</p>">Hover over here</p>
html tooltip text-alignment jquery-tooltip twitter-bootstrap
使用上下文工具提示快速浏览webapp的最佳方法是什么？
使用案例:
那里有一个简单的图书馆吗？
谢谢!
我正在寻找一种在Chrome网站上选择文字的方法,并根据文字选择提供包含内容的叠加/工具提示.
有没有人以前做过这个或者从头顶知道如何制作工具包弹出窗口？
非常感激.
javascript google-chrome google-chrome-extension jquery-tooltip
我无法找到Tipsy插件的下载链接 http://onehackoranother.com/projects/jquery/tipsy/
该插件的jQuery项目页面(http://plugins.jquery.com/project/tipsy)没有下载链接.我不是在寻找合适的地方吗？
我一直在尝试使用jQuery制作非常简单的javascript工具提示,但我已经碰到了一堵砖墙.想法是span在一个内部有一个内联元素()div.该span元素将包含一个div带有一点html(图像和链接)的工具提示.单击span元素时应打开工具提示,单击其外部或工具提示外部时应关闭工具提示.
到目前为止,打开工具提示不是问题,而是关闭.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
#colors > div {
background-color: red;
height: 50px;
width: 50px;
margin: 5px;
}
#colors > div > span {
min-height: 10px !important;
min-width: 10px !important;
border: 3px solid black;
position: relative;
}
.tooltip {
border: 2px solid blue;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function () {
// generate boxes and tooltips
for (var i = 0; i < 9; i++) …当消息框"悬停"时,我有这个代码可以显示工具提示.所有消息框都在一个名为chatbox的div中.
$('.box').hover(function(){
var htmltooltip = '<div id="info" class="shadow">';
htmltooltip += '<h4>Label info</h4>';
htmltooltip += '<img src="images/defaultphoto.gif"/>';
htmltooltip += '</div>';
$(this).append(htmltooltip).children('#info').hide().fadeIn(400).css('left', -150);
}, function() {
$('#info').remove();
}
);
这是我的名为#info的聊天框,框和工具提示的css代码
#chatbox {
position: absolute;
overflow-y:auto;
top:40%;
left:50%;
background:#fff;
height:80%;
width:550px;
border:3px solid black;
}
.box{
width:90%;
height:auto;
margin:5px 20px 0px 0px;
border:3px solid #918750;
float:left;
cursor: pointer;
}
#info{
position:absolute;
display:block;
background:#7F7777;
width:300px;
padding-bottom: 0.5em;
z-index:25;
}
我的问题是,当通过聊天框的限制时,聊天框div会切断工具提示.这是一个jsfiddle:http://jsfiddle.net/Ifalcao/k9Yrc/2/
聊天框div中的溢出规则必须存在,否则如果我有许多消息框,它们将通过聊天框的限制.(http://jsfiddle.net/Ifalcao/URBDE)我需要聊天框内的消息框,但是聊天框外面的消息框的工具提示.
提前致谢.
我试图动态地将工具提示文本设置为容器(div),并使用jQuery为每个div元素(elem.Alias-Status)添加到有序列表中:
function addNewElement(elem) {
var li = $("<li></li>");
li.prop("class", "ui-state-default");
li.prop("id", elem.Alias);
li.text(elem.Name);
var newItem = '<div id="' + elem.Alias + '-Status" class="elementStatus" tooltipText="' + elem.IP + '"><div class="image"><img id="' + elem.Alias + '-StatusImg" src="@Url.Content("~/images/ongoing.gif")"></div><div id="' + elem.Alias + '-StatusTxt" class="text">Waiting...</div></div>';
//$('#' + elem.Alias + '-Status').prop('tooltipText', elem. IP);
li.append(newItem);
li.appendTo($("#OuterDivContainer"));
};
但它显然不起作用.在运行时,当我将鼠标悬停在每个鼠标上时,不会显示任何工具提示.而且......我不知道该怎么做.我需要在创建项目的同时在此函数中创建它.
从另一个迭代所有项(元素)的函数调用上面的函数.然后此函数作为参数elem传递给addNewElement函数.
有任何想法吗？
我使用的是jquery-ui 1.10.3和jquery 1.10.2
我正在使用此工具提示:http://flowplayer.org/tools/demos/tooltip/index.html
我的html文件中有以下几行:
<script src="/javascripts/home.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<div id="boo">
<img src="image1.jpg" title="this thing is a tool"/>
<img src="image2.jpg" title="this thing is also tool"/>
</div>
我的home.js文件中有以下行:
$("#boo img[title]").tooltip();
我的css文件中有以下行:
.tooltip {
display:none;
background:transparent url(/tools/img/tooltip/black_arrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
我收到此错误:
Uncaught TypeError: Object [object Object] has no method 'tooltip'
我的智慧结束了.我觉得我已经完全按照网站上的例子,但不知道发生了什么.
我正在使用JQuery UI Tooltip和AJAX来验证表单.
我正在为每个字段使用一个工具提示,我正在根据我的AJAX返回的错误更改此工具提示的内容.
为了使我的代码完整,我需要测试工具提示是否已经为此字段初始化(更改内容),否则(创建工具提示).
问题是我不知道检查工具提示是否初始化的任何情感方法.
HTML:
<input type="text" id="text1"/>
<input type="text" id="text2"/>
我尝试了以下但是他们都无法测试工具提示是否已经创建.
JQUERY:
if($("#text1").tooltip() != null) //or $("#text1").tooltip() != 'undefined'
//does'nt work because .tooltip() always return an object.
if(typeof $("#text1").tooltip() != null)//or typeof $("#text1").tooltip() != 'undefined'
//does'nt work always return an object.
if($("#text1").tooltip().hasOwnProperty('option'))//or $("#text1").tooltip().hasOwnProperty('content')
//does'nt work it always return false.
如果有人可以帮我找到一种方法来检查工具提示是否存在,那就非常感激了
谢谢!