tooltip.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. .wh-tooltip-container,
  2. .wh_breadcrumb title,
  3. .wh_publication_toc .title {
  4. position: relative;
  5. /* display: inline-block;*/
  6. }
  7. .wh-tooltip-container .wh-tooltip,
  8. .wh_breadcrumb .topicref .wh-tooltip,
  9. .wh_publication_toc .topicref .wh-tooltip {
  10. display: block;
  11. align-items: baseline;
  12. visibility: hidden;
  13. background-color: #444;
  14. color: #fff;
  15. font-weight: normal;
  16. text-align: left;
  17. line-height: 1.5em;
  18. padding: 10px;
  19. margin: 4px;
  20. border-radius: .4em;
  21. min-width: 15em;
  22. min-height: 2em;
  23. position: absolute;
  24. z-index: 1;
  25. opacity: 0;
  26. transition: .5s opacity 1s;
  27. }
  28. .wh-tooltip-container .wh-tooltip-content,
  29. .wh_breadcrumb .topicref .wh-tooltip .shortdesc,
  30. .wh_publication_toc .topicref .wh-tooltip .shortdesc {
  31. /* Remove the paragraph margin. */
  32. margin: 0;
  33. }
  34. .wh-tooltip-container:hover .wh-tooltip,
  35. .wh_breadcrumb .topicref .title:hover .wh-tooltip,
  36. .wh_publication_toc .topicref .title:hover .wh-tooltip {
  37. visibility: visible;
  38. opacity: 1;
  39. }
  40. /* WH-1545: Do not mix the tooltip styles with those from the Publication TOC or Breadcrumb. */
  41. .wh_breadcrumb span.wh-tooltip *,
  42. .wh_publication_toc span.wh-tooltip *
  43. {
  44. color: inherit !important;
  45. background-color: transparent !important;
  46. }
  47. /* Tooltip positioning. */
  48. @media screen {
  49. [data-tooltip-position="left"] .wh-tooltip {
  50. top: -0.5em;
  51. right: 105%;
  52. }
  53. [data-tooltip-position="right"] .wh-tooltip {
  54. top: -0.5em;
  55. left: 105%;
  56. }
  57. [data-tooltip-position="top"] .wh-tooltip {
  58. bottom: 100%;
  59. }
  60. [data-tooltip-position="bottom"] .wh-tooltip {
  61. top: 100%;
  62. }
  63. [data-tooltip-position="hidden"] .wh-tooltip {
  64. display:none !important;
  65. }
  66. }
  67. /* Tooltip arrow. */
  68. /*.wh-tooltip-container .wh-tooltip::before,*/
  69. .wh_breadcrumb .topicref .wh-tooltip::before,
  70. .wh_publication_toc .topicref .wh-tooltip::before {
  71. content: " ";
  72. position: absolute;
  73. border: .4em solid transparent;
  74. }
  75. [data-tooltip-position="left"] .wh-tooltip::before {
  76. top: .8em;
  77. left: 100%;
  78. border-left-color: #444;
  79. }
  80. [data-tooltip-position="right"] .wh-tooltip::before {
  81. top: .8em;
  82. right: 100%;
  83. border-right-color: #444;
  84. }
  85. [data-tooltip-position="bottom"] .wh-tooltip::before {
  86. left: .8em;
  87. bottom: 100%;
  88. border-bottom-color: #444;
  89. }
  90. [data-tooltip-position="top"] .wh-tooltip::before {
  91. left: .8em;
  92. top: 100%;
  93. border-top-color: #444;
  94. }