t-viSNE: Interactive Assessment and Interpretation of t-SNE Projections
https://doi.org/10.1109/TVCG.2020.2986996
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.4 KiB
73 lines
1.4 KiB
6 years ago
|
[API Documentation](index.md) ➤ Styling and modifying tooltips
|
||
|
|
|
||
|
|
# Styling and modifying tooltips
|
||
|
|
Tooltips make no assumption about how they will be styled. Any style is left up
|
||
|
|
to the user.
|
||
|
|
|
||
|
|
### tip.style
|
||
|
|
A proxy to d3's [selection.style](https://github.com/mbostock/d3/wiki/Selections#wiki-style).
|
||
|
|
|
||
|
|
### tip.attr
|
||
|
|
A proxy to d3's [selection.attr](https://github.com/mbostock/d3/wiki/Selections#wiki-attr).
|
||
|
|
|
||
|
|
### Example Styles
|
||
|
|
``` css
|
||
|
|
.d3-tip {
|
||
|
|
line-height: 1;
|
||
|
|
font-weight: bold;
|
||
|
|
padding: 12px;
|
||
|
|
background: rgba(0, 0, 0, 0.8);
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Creates a small triangle extender for the tooltip */
|
||
|
|
.d3-tip:after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: inline;
|
||
|
|
font-size: 10px;
|
||
|
|
width: 100%;
|
||
|
|
line-height: 1;
|
||
|
|
color: rgba(0, 0, 0, 0.8);
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Nrthward tooltips */
|
||
|
|
.d3-tip.n:after {
|
||
|
|
content: "\25BC";
|
||
|
|
margin: -1px 0 0 0;
|
||
|
|
top: 100%;
|
||
|
|
left: 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Eastward tooltips */
|
||
|
|
.d3-tip.e:after {
|
||
|
|
content: "\25C0";
|
||
|
|
margin: -4px 0 0 0;
|
||
|
|
top: 50%;
|
||
|
|
left: -8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Southward tooltips */
|
||
|
|
.d3-tip.s:after {
|
||
|
|
content: "\25B2";
|
||
|
|
margin: 0 0 1px 0;
|
||
|
|
top: -8px;
|
||
|
|
left: 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Westward tooltips */
|
||
|
|
.d3-tip.w:after {
|
||
|
|
content: "\25B6";
|
||
|
|
margin: -4px 0 0 -1px;
|
||
|
|
top: 50%;
|
||
|
|
left: 100%;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
See these stylings in action in either
|
||
|
|
[a live example](http://bl.ocks.org/deanmalmgren/6638585) or the
|
||
|
|
[examples directory](../examples/arrow-styles.html).
|