提交 e156d769 编写于 作者: A afc163

update tooltip style

上级 515ce029
var React = require('react');
var Tooltip = require('rc-tooltip');
require('rc-tooltip/assets/bootstrap.css');
module.exports = React.createClass({
getInitialState: function () {
......@@ -17,6 +16,7 @@ module.exports = React.createClass({
render: function() {
return (
<Tooltip placement={this.state.placement}
prefixCls="ant-tooltip"
trigger="hover"
overlay={this.state.title}>
{this.props.children}
......
......@@ -57,4 +57,4 @@
&-group {
.btn-group(@btnPrefixClass);
}
}
\ No newline at end of file
}
@import "../mixins/index";
@tooltipPrefixClass: ~"@{css-prefix}tooltip";
//
// Tooltips
// --------------------------------------------------
//** Tooltip max width
@tooltip-max-width: 250px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: #373737;
@tooltip-opacity: 1;
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
// Base class
.@{tooltipPrefixClass} {
position: absolute;
z-index: 1070;
display: block;
visibility: visible;
font-size: @font-size-base;
line-height: 1.5;
&-placement-top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
&-placement-right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
&-placement-bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
&-placement-left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
}
// Wrapper for the tooltip content
.@{tooltipPrefixClass}-inner {
max-width: @tooltip-max-width;
padding: 7px 10px;
color: @tooltip-color;
text-align: left;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: 6px;
box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
// Arrows
.@{tooltipPrefixClass}-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.@{tooltipPrefixClass} {
&-placement-top &-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&-placement-right &-arrow {
top: 50%;
left: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-arrow-color;
}
&-placement-left &-arrow {
top: 50%;
right: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-arrow-color;
}
&-placement-bottom &-arrow {
top: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册