Question

我试图在工具提示的父对象下水平居中放置一个工具提示，而不在工具提示上设置静态宽度。这可能吗？请参考下面的代码片段。我可以调整绝对位置以使其完全居中，但是由于文本的长度会变化，因此它们不会全部居中。

package com.mannonen.tasavalta;

import java.io.Serializable;

public class Muisti implements Serializable {

    //Alla olevat ovat kirjanmerkkejä varten
    private double[][] kirjanMerkkiOrientaatioD;
    private String[] kirjanMerkkiTiedostoD;
    private double[][] kirjanMerkkiOrientaatioT;
    private String[] kirjanMerkkiTiedostoT;
    private boolean[] kirjanMerkkiOnkoAsetettu= {false, false, false, false,
        false, false, false, false, false};

    //Alla olevat ovat valikkomäärittelyitä varten
    private String[] tiedostoTietoNimi= {"Sampo", "Frame_of_Sampo", "Cell",
        "Liike", "Liike2", "Liike3", "Liikesampo", "Pilvi1", "Pilvi2",
        "Universe", "Logic", "Cosmology", "Mathematics", "Relativity",
        "Reality", "Reality2", "Viides", "Test", "Fft", "FloatTaulukko",
        "Listat"};
    private int[] tiedostoTietoValikkoSijainti= {1, 1, 1, 1, 1, 1, 1, 1, 1,
        1, 1, 3, 2, 2, 3, 3, 5, 5, 5, 5, 5};
    private boolean[] tiedostoTietoOnkoNakyva={true, true, true, true, true,
        true, true, true, true, true, true, true, true, false, true,
        true, false, true, true, true, true};
    private boolean[] tiedostoTietoOnkoAsetettu= {true, true, true, true,
        true, true, true, true, true, true, true, false, true, true,
        true, true, true, true, true, true, true};
    private boolean[] tiedostoTietoOnko3D= {true, true, true, true, true,
        true, true, true, true, false, false, false, false, false,
        false, false, false, false, false, false, false};
    private int tiedostoTietoTiedostoTietoja=21;

    //Alla oleva ilmoittaa palstojen kokonaismäärän ilman Bookmarks-palstaa
    private int palstoja=5;

    public Muisti() {}
    public int annaPalstat() {return palstoja;}
    public boolean onkoKirjanMerkkia(int num) {return kirjanMerkkiOnkoAsetettu[num];}
    public int annaTiedostojenMaara() {return tiedostoTietoTiedostoTietoja;}
    public int annaValikkoSijainti(int num) {return tiedostoTietoValikkoSijainti[num];}
    public boolean annaOnko3D(int num) {return tiedostoTietoOnko3D[num];}
    public String annaTiedostonNimi(int num) {return tiedostoTietoNimi[num];}
    public boolean annaOnkoAsetettu(int num) {return tiedostoTietoOnkoAsetettu[num];}
    public boolean annaOnkoNakyva(int num) {return tiedostoTietoOnkoNakyva[num];}

}

body {
margin: 20px;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

Answer 1

最容易的是translate()而不是负数margin。只要工具提示的长度不超过文本本身，它就会起作用...它可能会离开屏幕

body {
  margin: 20px;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}


/* see center */

.tooltip, .tooltiptext {
  background-image: linear-gradient(to left, transparent 50%, gray 50%);
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  transform: translate(-50%, 0)
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<div class="tooltip">Hover over me
  <span class="tooltiptext">Notifications</span>
</div>

<br/><br/><br/><br/>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Account</span>
</div>

<br/><br/><br/><br/>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Help</span>
</div>

在未设置静态宽度的情况下将工具提示水平放置在父对象下水平居中的位置

1 个答案: