Tooltip cutoff at the edge of the containing element

user_997474 0
Viewed 1172

I have the following html:

<div class="container">
  <span class="word-container" >
    <span tooltip-def="To sign or give formal approval to.">
      <span class="define-word highlight-word">ratifying</span>
    </span>
  </span>
</div>

CSS:

.container {
  margin-top: 100px;
}
.word-container [tooltip-def] {
  display: inline-block;
  position: relative;
}
.word-container [tooltip-def]:before {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  border-color: #323232 transparent transparent transparent;
  border-style: solid;
  border-width: 4px 6px 0 6px;
  content: "";
  display: none;
  top: -6px;
  z-index: 99;
}
.word-container [tooltip-def]:after {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  content: attr(tooltip-def);
  background: #323232;
  border-radius: 5px;
  color: #fff;
  display: none;
  font-family: open sans;
  font-size: 12px;
  height: auto;
  min-width: 250px;
  padding: 5px;
  text-align: center;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  width: auto;
  z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
  display: inline-block;
}

The tooltip is cut off on the left side. I tried overflow: visible and higher z-index on .word-container [tooltip-def]:after, but none of the working.

Here is the jsfiddle demo: https://jsfiddle.net/mddc/5dtwr6zc/10/

How can I make minimal CSS changes to make the tooltip visible? Move to the right side when the left side touches the browser edge?

css
2 Answers

you are going great you only need to change the css. below is the css code apply and check. 

.container {
  margin-top: 100px;
}
.word-container [tooltip-def] {
  display: inline-block;
  position: relative;
}
.word-container [tooltip-def]:before {
  left: 10%;
  position: absolute;
  transform: translateX(-50%);
  border-color: #323232 transparent transparent transparent;
  border-style: solid;
  border-width: 4px 6px 0 6px;
  content: "";
  display: none;
  top: -6px;
  z-index: 99;
}
.word-container [tooltip-def]:after {
  left: 20%;
  position: relative;
  transform: translateX(-50%);
  content: attr(tooltip-def);
  background: #323232;
  border-radius: 5px;
  color: #fff;
  display: none;
  font-family: open sans;
  font-size: 12px;
  height: auto;
  min-width: 250px;
  padding: 5px;
  text-align: center;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  width: auto;
  z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
  display: inline-block;
}
user_89314780

I've made the changes which can be viewed in the fiddle below

https://jsfiddle.net/5dtwr6zc/14/

.test{
 overflow: visible;
}
.container {
  margin-top: 100px;
}
.word-container [tooltip-def] {
  display: inline-block;
  position: relative;
}
.word-container [tooltip-def]:before {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  border-color: #323232 transparent transparent transparent;
  border-style: solid;
  border-width: 4px 6px 0 6px;
  content: "";
  display: none;
  top: -6px;
  z-index: 99;
}
.word-container [tooltip-def]:after {
  left: 150%;
  position: absolute;
  transform: translateX(-47%);
  content: attr(tooltip-def);
  background: #323232;
  border-radius: 5px;
  color: #fff;
  display: none;
  font-family: open sans;
  font-size: 12px;
  height: auto;
  min-width: 250px;
  padding: 5px;
  text-align: center;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  width: auto;
  z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
  display: inline-block;
}

The problem was the positioning of the after psuedo element. But I would strongly suggest to make the positioning dynamic as per the context using JavaScript

user_39043330
Related