.wh-tooltip-container, .wh_breadcrumb title, .wh_publication_toc .title { position: relative; /* display: inline-block;*/ } .wh-tooltip-container .wh-tooltip, .wh_breadcrumb .topicref .wh-tooltip, .wh_publication_toc .topicref .wh-tooltip { display: block; align-items: baseline; visibility: hidden; background-color: #444; color: #fff; font-weight: normal; text-align: left; line-height: 1.5em; padding: 10px; margin: 4px; border-radius: .4em; min-width: 15em; min-height: 2em; position: absolute; z-index: 1; opacity: 0; transition: .5s opacity 1s; } .wh-tooltip-container .wh-tooltip-content, .wh_breadcrumb .topicref .wh-tooltip .shortdesc, .wh_publication_toc .topicref .wh-tooltip .shortdesc { /* Remove the paragraph margin. */ margin: 0; } .wh-tooltip-container:hover .wh-tooltip, .wh_breadcrumb .topicref .title:hover .wh-tooltip, .wh_publication_toc .topicref .title:hover .wh-tooltip { visibility: visible; opacity: 1; } /* WH-1545: Do not mix the tooltip styles with those from the Publication TOC or Breadcrumb. */ .wh_breadcrumb span.wh-tooltip *, .wh_publication_toc span.wh-tooltip * { color: inherit !important; background-color: transparent !important; } /* Tooltip positioning. */ @media screen { [data-tooltip-position="left"] .wh-tooltip { top: -0.5em; right: 105%; } [data-tooltip-position="right"] .wh-tooltip { top: -0.5em; left: 105%; } [data-tooltip-position="top"] .wh-tooltip { bottom: 100%; } [data-tooltip-position="bottom"] .wh-tooltip { top: 100%; } [data-tooltip-position="hidden"] .wh-tooltip { display:none !important; } } /* Tooltip arrow. */ /*.wh-tooltip-container .wh-tooltip::before,*/ .wh_breadcrumb .topicref .wh-tooltip::before, .wh_publication_toc .topicref .wh-tooltip::before { content: " "; position: absolute; border: .4em solid transparent; } [data-tooltip-position="left"] .wh-tooltip::before { top: .8em; left: 100%; border-left-color: #444; } [data-tooltip-position="right"] .wh-tooltip::before { top: .8em; right: 100%; border-right-color: #444; } [data-tooltip-position="bottom"] .wh-tooltip::before { left: .8em; bottom: 100%; border-bottom-color: #444; } [data-tooltip-position="top"] .wh-tooltip::before { left: .8em; top: 100%; border-top-color: #444; }