我使用Twitter Bootstrap创建了一个工具提示.
工具提示显示三行.但是,我想只显示一行的工具提示.
如何更改工具提示的宽度?这是特定于Twitter Bootstrap还是工具提示本身?
如果我查看官方文档,我可以看到一个名为HTML的属性:
Name | Type | default | Description
----------------------------------------------------------------------------
html | boolean | false | Insert html into the tooltip.
If false, jquery's text method
will be used to insert content
into the dom. Use text if you're
worried about XSS attacks.
Run Code Online (Sandbox Code Playgroud)
它说,"将html插入工具提示",但类型是布尔值.如何在Tooltip中使用复杂的html?
我正在使用工具提示.但我希望在图像标记上,就像我将鼠标移到图像上时,工具提示应该可以工作.我试过但不是在图像标签上为我工作.
我有一个标签的工具提示,我希望它保持打开,直到用户将鼠标移动到另一个控件.
我在工具提示上尝试了以下属性:
StaysOpen="True"
Run Code Online (Sandbox Code Playgroud)
和
ToolTipService.ShowDuration = "60000"
Run Code Online (Sandbox Code Playgroud)
但在这两种情况下,工具提示仅显示5秒钟.
为什么忽略这些值?
我有一个bootstrap工具提示的问题:当我点击一个按钮时,即使光标在按钮之外,工具提示也会保持不变.我查看了手册 - Bootstrap的工具提示,如果我点击按钮,我会看到同样的问题.有没有解决方法可以解决这个问题?刚尝试了最新的FF,IE.
我刚刚遇到了一个巧妙的CSS技巧.看看小提琴......
.tooltiptail {
display: block;
border-color: #ffffff #a0c7ff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
}
.anothertail {
background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
display: block;
height: 29px;
width: 30px;
}
Run Code Online (Sandbox Code Playgroud)
<div>Cool Trick:
<br />
<div class="tooltiptail"></div>
</div>
<br />
<div>How do I get this effect with only CSS?
<br />
<div class="anothertail"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
这会产生一个小箭头/三角形效果,一个"工具提示尾巴".这让我大吃一惊!我真的很想知道它是如何工作的?!
此外,有没有办法扩展这个CSS技巧来创建一个效果,如下所示:
这是一个有趣的问题.这可以仅使用CSS来完成,暂时忽略阴影吗?
我想出了我最初问题的解决方案.这是小提琴......
HTML
<div style="position: relative;">Cool Trick:<br />
<div class="tooltiptail"></div>
<div class="tooltiptail2"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS
.tooltiptail {
display: block;
border-color: #ffffff #a0c7ff #ffffff …
Run Code Online (Sandbox Code Playgroud) 我有一系列的svg矩形(使用D3.js),我想在鼠标悬停时显示一条消息,消息应该被一个充当背景的框包围.它们应该完全彼此对齐并与矩形(顶部和居中)对齐.做这个的最好方式是什么?
我尝试使用"x","y","width"和"height"属性添加svg文本,然后在svg rect之前添加.问题是文本的参考点在中间(因为我希望它居中对齐我使用text-anchor: middle
),但对于矩形,它是左上角坐标,加上我想在文本周围留一点边距,这使得它有点像痛苦
另一种选择是使用一个html div,这很好,因为我可以直接添加文本和填充但我不知道如何获得每个矩形的绝对坐标.有没有办法做到这一点?
注意:
根据您的Bootstrap版本(3.3之前或之前),您可能需要不同的答案.
注意笔记.
当我激活工具提示(悬停在单元格上)或此代码中的弹出窗口时,表的大小正在增加.我怎么能避免这个?
这里emptyRow - 用100生成tr的函数
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script>
<style>
#matrix td {
width: 10px;
height: 10px;
border: 1px solid gray;
padding: 0px;
}
</style>
<script>
function emptyRow() {
str = '<tr>'
for (j = 0; j < 100; j++) {
str += '<td rel="tooltip" data-original-title="text"></td>'
}
str += '</tr>'
return str
}
$(document).ready(function () {
$("#matrix tr:last").after(emptyRow())
$("[rel=tooltip]").tooltip();
});
</script>
</head>
<body style="margin-top: 40px;">
<table id="matrix"> …
Run Code Online (Sandbox Code Playgroud) 是否可以格式化HTML工具提示?
例如,我有一个属性title ="foo!"的DIV.当我的浏览器文本大小放大或缩小时,工具提示的文本大小保持不变.有没有办法使用浏览器设置进行工具提示字体缩放?