ad02830521
This is intended to make it easy to have a glimpse at the content of an event, when its width is not sufficient for its content to be displayed (without overflowing its parent). It uses an external jQuery library to display tooltips: named _tipso_ (https://github.com/object505/tipso).
108 lines
2.1 KiB
CSS
108 lines
2.1 KiB
CSS
/* Tipso Bubble Styles */
|
|
.tipso_bubble, .tipso_bubble > .tipso_arrow{
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.tipso_bubble {
|
|
position: absolute;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
z-index: 9999;
|
|
}
|
|
.tipso_style{
|
|
/* cursor: help; */
|
|
border-bottom: 1px dotted;
|
|
}
|
|
.tipso_title {
|
|
padding: 3px 0;
|
|
border-radius: 6px 6px 0 0;
|
|
font-weight: 700;
|
|
}
|
|
.tipso_content {
|
|
word-wrap: break-word;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
/* Tipso Bubble size classes - Similar to Foundation's syntax*/
|
|
.tipso_bubble.tiny {
|
|
font-size: 0.6rem;
|
|
}
|
|
.tipso_bubble.small {
|
|
font-size: 0.8rem;
|
|
}
|
|
.tipso_bubble.default {
|
|
font-size: 1rem;
|
|
}
|
|
.tipso_bubble.large {
|
|
font-size: 1.2rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.tipso_bubble.cal_small {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
/* Tipso Bubble Div */
|
|
.tipso_bubble > .tipso_arrow{
|
|
position: absolute;
|
|
width: 0; height: 0;
|
|
border: 8px solid;
|
|
pointer-events: none;
|
|
}
|
|
.tipso_bubble.top > .tipso_arrow {
|
|
border-top-color: #000;
|
|
border-right-color: transparent;
|
|
border-left-color: transparent;
|
|
border-bottom-color: transparent;
|
|
top: 100%;
|
|
left: 50%;
|
|
margin-left: -8px;
|
|
}
|
|
.tipso_bubble.bottom > .tipso_arrow {
|
|
border-bottom-color: #000;
|
|
border-right-color: transparent;
|
|
border-left-color: transparent;
|
|
border-top-color: transparent;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
margin-left: -8px;
|
|
}
|
|
.tipso_bubble.left > .tipso_arrow {
|
|
border-left-color: #000;
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-right-color: transparent;
|
|
top: 50%;
|
|
left: 100%;
|
|
margin-top: -8px;
|
|
}
|
|
.tipso_bubble.right > .tipso_arrow {
|
|
border-right-color: #000;
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-left-color: transparent;
|
|
top: 50%;
|
|
right: 100%;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.tipso_bubble .top_right_corner,
|
|
.tipso_bubble.top_right_corner {
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.tipso_bubble .bottom_right_corner,
|
|
.tipso_bubble.bottom_right_corner {
|
|
border-top-left-radius: 0;
|
|
}
|
|
|
|
.tipso_bubble .top_left_corner,
|
|
.tipso_bubble.top_left_corner {
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.tipso_bubble .bottom_left_corner,
|
|
.tipso_bubble.bottom_left_corner {
|
|
border-top-right-radius: 0;
|
|
}
|