1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-02-02 18:08:26 +01:00

CSS tooltips with arrows.

Summary: Adds little arrows in CSS to the tooltipcs.

Test Plan: Tested UIExamples and Remarkup Box

Reviewers: epriestley, btrahan

Reviewed By: btrahan

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D4126
This commit is contained in:
Chad Little 2012-12-08 16:51:01 -08:00
parent fb1a6575dc
commit b51aa708ea
2 changed files with 94 additions and 45 deletions

View file

@ -716,7 +716,7 @@ celerity_register_resource_map(array(
), ),
'aphront-tooltip-css' => 'aphront-tooltip-css' =>
array( array(
'uri' => '/res/e0fa3a98/rsrc/css/aphront/tooltip.css', 'uri' => '/res/32665c0e/rsrc/css/aphront/tooltip.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3194,7 +3194,7 @@ celerity_register_resource_map(array(
), array( ), array(
'packages' => 'packages' =>
array( array(
'71401d18' => '0620a1f4' =>
array( array(
'name' => 'core.pkg.css', 'name' => 'core.pkg.css',
'symbols' => 'symbols' =>
@ -3238,7 +3238,7 @@ celerity_register_resource_map(array(
36 => 'phabricator-crumbs-view-css', 36 => 'phabricator-crumbs-view-css',
37 => 'phabricator-object-item-list-view-css', 37 => 'phabricator-object-item-list-view-css',
), ),
'uri' => '/res/pkg/71401d18/core.pkg.css', 'uri' => '/res/pkg/0620a1f4/core.pkg.css',
'type' => 'css', 'type' => 'css',
), ),
'5bcc25b6' => '5bcc25b6' =>
@ -3426,20 +3426,20 @@ celerity_register_resource_map(array(
'reverse' => 'reverse' =>
array( array(
'aphront-attached-file-view-css' => '7839ae2d', 'aphront-attached-file-view-css' => '7839ae2d',
'aphront-crumbs-view-css' => '71401d18', 'aphront-crumbs-view-css' => '0620a1f4',
'aphront-dialog-view-css' => '71401d18', 'aphront-dialog-view-css' => '0620a1f4',
'aphront-error-view-css' => '71401d18', 'aphront-error-view-css' => '0620a1f4',
'aphront-form-view-css' => '71401d18', 'aphront-form-view-css' => '0620a1f4',
'aphront-headsup-action-list-view-css' => 'c904bbee', 'aphront-headsup-action-list-view-css' => 'c904bbee',
'aphront-headsup-view-css' => '71401d18', 'aphront-headsup-view-css' => '0620a1f4',
'aphront-list-filter-view-css' => '71401d18', 'aphront-list-filter-view-css' => '0620a1f4',
'aphront-pager-view-css' => '71401d18', 'aphront-pager-view-css' => '0620a1f4',
'aphront-panel-view-css' => '71401d18', 'aphront-panel-view-css' => '0620a1f4',
'aphront-side-nav-view-css' => '71401d18', 'aphront-side-nav-view-css' => '0620a1f4',
'aphront-table-view-css' => '71401d18', 'aphront-table-view-css' => '0620a1f4',
'aphront-tokenizer-control-css' => '71401d18', 'aphront-tokenizer-control-css' => '0620a1f4',
'aphront-tooltip-css' => '71401d18', 'aphront-tooltip-css' => '0620a1f4',
'aphront-typeahead-control-css' => '71401d18', 'aphront-typeahead-control-css' => '0620a1f4',
'differential-changeset-view-css' => 'c904bbee', 'differential-changeset-view-css' => 'c904bbee',
'differential-core-view-css' => 'c904bbee', 'differential-core-view-css' => 'c904bbee',
'differential-inline-comment-editor' => '7ecd31fa', 'differential-inline-comment-editor' => '7ecd31fa',
@ -3520,48 +3520,48 @@ celerity_register_resource_map(array(
'javelin-util' => 'db6d724d', 'javelin-util' => 'db6d724d',
'javelin-vector' => 'db6d724d', 'javelin-vector' => 'db6d724d',
'javelin-workflow' => 'db6d724d', 'javelin-workflow' => 'db6d724d',
'lightbox-attachment-css' => '71401d18', 'lightbox-attachment-css' => '0620a1f4',
'maniphest-task-summary-css' => '7839ae2d', 'maniphest-task-summary-css' => '7839ae2d',
'maniphest-transaction-detail-css' => '7839ae2d', 'maniphest-transaction-detail-css' => '7839ae2d',
'phabricator-app-buttons-css' => '71401d18', 'phabricator-app-buttons-css' => '0620a1f4',
'phabricator-busy' => '5bcc25b6', 'phabricator-busy' => '5bcc25b6',
'phabricator-content-source-view-css' => 'c904bbee', 'phabricator-content-source-view-css' => 'c904bbee',
'phabricator-core-buttons-css' => '71401d18', 'phabricator-core-buttons-css' => '0620a1f4',
'phabricator-core-css' => '71401d18', 'phabricator-core-css' => '0620a1f4',
'phabricator-crumbs-view-css' => '71401d18', 'phabricator-crumbs-view-css' => '0620a1f4',
'phabricator-directory-css' => '71401d18', 'phabricator-directory-css' => '0620a1f4',
'phabricator-drag-and-drop-file-upload' => '7ecd31fa', 'phabricator-drag-and-drop-file-upload' => '7ecd31fa',
'phabricator-dropdown-menu' => '5bcc25b6', 'phabricator-dropdown-menu' => '5bcc25b6',
'phabricator-file-upload' => '5bcc25b6', 'phabricator-file-upload' => '5bcc25b6',
'phabricator-filetree-view-css' => '71401d18', 'phabricator-filetree-view-css' => '0620a1f4',
'phabricator-flag-css' => '71401d18', 'phabricator-flag-css' => '0620a1f4',
'phabricator-form-view-css' => '71401d18', 'phabricator-form-view-css' => '0620a1f4',
'phabricator-header-view-css' => '71401d18', 'phabricator-header-view-css' => '0620a1f4',
'phabricator-jump-nav' => '71401d18', 'phabricator-jump-nav' => '0620a1f4',
'phabricator-keyboard-shortcut' => '5bcc25b6', 'phabricator-keyboard-shortcut' => '5bcc25b6',
'phabricator-keyboard-shortcut-manager' => '5bcc25b6', 'phabricator-keyboard-shortcut-manager' => '5bcc25b6',
'phabricator-main-menu-view' => '71401d18', 'phabricator-main-menu-view' => '0620a1f4',
'phabricator-menu-item' => '5bcc25b6', 'phabricator-menu-item' => '5bcc25b6',
'phabricator-nav-view-css' => '71401d18', 'phabricator-nav-view-css' => '0620a1f4',
'phabricator-notification' => '5bcc25b6', 'phabricator-notification' => '5bcc25b6',
'phabricator-notification-css' => '71401d18', 'phabricator-notification-css' => '0620a1f4',
'phabricator-notification-menu-css' => '71401d18', 'phabricator-notification-menu-css' => '0620a1f4',
'phabricator-object-item-list-view-css' => '71401d18', 'phabricator-object-item-list-view-css' => '0620a1f4',
'phabricator-object-selector-css' => 'c904bbee', 'phabricator-object-selector-css' => 'c904bbee',
'phabricator-paste-file-upload' => '5bcc25b6', 'phabricator-paste-file-upload' => '5bcc25b6',
'phabricator-prefab' => '5bcc25b6', 'phabricator-prefab' => '5bcc25b6',
'phabricator-project-tag-css' => '7839ae2d', 'phabricator-project-tag-css' => '7839ae2d',
'phabricator-remarkup-css' => '71401d18', 'phabricator-remarkup-css' => '0620a1f4',
'phabricator-shaped-request' => '7ecd31fa', 'phabricator-shaped-request' => '7ecd31fa',
'phabricator-side-menu-view-css' => '71401d18', 'phabricator-side-menu-view-css' => '0620a1f4',
'phabricator-standard-page-view' => '71401d18', 'phabricator-standard-page-view' => '0620a1f4',
'phabricator-textareautils' => '5bcc25b6', 'phabricator-textareautils' => '5bcc25b6',
'phabricator-tooltip' => '5bcc25b6', 'phabricator-tooltip' => '5bcc25b6',
'phabricator-transaction-view-css' => '71401d18', 'phabricator-transaction-view-css' => '0620a1f4',
'sprite-apps-large-css' => '71401d18', 'sprite-apps-large-css' => '0620a1f4',
'sprite-gradient-css' => '71401d18', 'sprite-gradient-css' => '0620a1f4',
'sprite-icon-css' => '71401d18', 'sprite-icon-css' => '0620a1f4',
'sprite-menu-css' => '71401d18', 'sprite-menu-css' => '0620a1f4',
'syntax-highlighting-css' => '71401d18', 'syntax-highlighting-css' => '0620a1f4',
), ),
)); ));

View file

@ -8,20 +8,69 @@
} }
.jx-tooltip { .jx-tooltip {
background: #222222; background: #000;
color: #f9f9f9; color: #f9f9f9;
padding: 6px 8px; font-size: 12px;
padding: 4px 8px;
overflow: hidden; overflow: hidden;
white-space: pre-wrap; white-space: pre-wrap;
border-radius: 3px;
opacity: 0.9; opacity: 0.9;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
} }
.jx-tooltip:after {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-width: 5px;
}
.jx-tooltip-align-E { .jx-tooltip-align-E {
padding-left: 3px; margin-left: 5px;
}
.jx-tooltip-align-E .jx-tooltip:after {
margin-top: -5px;
border-right-color: #000;
right: 100%;
top: 50%;
}
.jx-tooltip-align-W {
margin-right: 5px;
}
.jx-tooltip-align-W .jx-tooltip:after {
margin-top: -5px;
border-left-color: #000;
left: 100%;
top: 50%;
} }
.jx-tooltip-align-N { .jx-tooltip-align-N {
padding-bottom: 3px; margin-top: -5px;
}
.jx-tooltip-align-N .jx-tooltip:after {
margin-left: -5px;
border-top-color: #000;
top: 100%;
left: 50%;
}
.jx-tooltip-align-S {
margin-bottom: -5px;
}
.jx-tooltip-align-S .jx-tooltip:after {
margin-left: -5px;
border-bottom-color: #000;
bottom: 100%;
left: 50%;
} }