parent
9c499b5360
commit
7d55273e8b
4 changed files with 73 additions and 4 deletions
@ -0,0 +1,17 @@ |
||||
import { Component } from "react"; |
||||
import * as React from "react"; |
||||
import styles from './styles.module.scss'; |
||||
|
||||
export default class Tooltip extends Component<{ tooltipText: string }> { |
||||
constructor(props) { |
||||
super(props); |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<div className={styles.tooltip}>{this.props.children} |
||||
<span className={styles.tooltiptext}>{this.props.tooltipText}</span> |
||||
</div> |
||||
) |
||||
} |
||||
} |
@ -0,0 +1,46 @@ |
||||
/* Tooltip container */ |
||||
.tooltip { |
||||
position: relative; |
||||
display: inline-block; |
||||
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ |
||||
} |
||||
|
||||
/* Tooltip text */ |
||||
.tooltip .tooltiptext { |
||||
visibility: hidden; |
||||
width: 120px; |
||||
background-color: #555; |
||||
color: #fff; |
||||
text-align: center; |
||||
padding: 5px 0; |
||||
border-radius: 6px; |
||||
|
||||
/* Position the tooltip text */ |
||||
position: absolute; |
||||
z-index: 1; |
||||
bottom: 125%; |
||||
left: 50%; |
||||
margin-left: -60px; |
||||
|
||||
/* Fade in tooltip */ |
||||
opacity: 0; |
||||
transition: opacity 0.3s; |
||||
} |
||||
|
||||
/* Tooltip arrow */ |
||||
.tooltip .tooltiptext::after { |
||||
content: ""; |
||||
position: absolute; |
||||
top: 100%; |
||||
left: 50%; |
||||
margin-left: -5px; |
||||
border-width: 5px; |
||||
border-style: solid; |
||||
border-color: #555 transparent transparent transparent; |
||||
} |
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */ |
||||
.tooltip:hover .tooltiptext { |
||||
visibility: visible; |
||||
opacity: 1; |
||||
} |
Loading…
Reference in new issue