工具提示造型？（踢我在正確的方向）

我有這樣的元素：工具提示造型？（踢我在正確的方向）

<span class="PSLONGEDITBOX" id="MTG_INSTR$1"> 
    <a href="WWW.WEBSITE.COM" target="_blank">LEROY JENKINS</a> 
</span>

而且我想添加一個提示，看起來像這樣：

LEROY JENKINS 
------------- 
Age: 45 
Location: USA

哪裏樂華也許是大膽/稍大（無論如何，我可以谷歌的CSS）。我準備好了名爲'name''age'（整個字符串）和'location'（整個字符串）的變量已準備好彈出到工具提示中。

我的問題是 - 開始，到哪裏元素都是對整個元素（mtg_ ..）參考我只是在文中通過一個子節點添加，然後用CSS樣式呢？有人可以指引我走向正確的方向嗎？因爲每個指南都是太基礎/沒有足夠的信息，或者太複雜。

我願意做的工作我自己，我只是我不知道從哪裏開始基本。

來源

2017-07-20 Kevin

正常（小的）提示都沒有那麼好。如果你想做更多的造型，我會建議看看這裏的bootstraps「popover」：https://v4-alpha.getbootstrap.com/components/popovers/ – hansTheFranz

這樣的事情？ https://codepen.io/mcoker/pen/awggXO –

@hansTheFranz這很酷，似乎是一個很好的方式從該重要數據單獨的名稱。我是JS/HTML/CSS的新手，並且正在開發一個項目（這個）來學習它們。我可以設置彈出框的樣式（更改顏色/ etc /可能正常的CSS）？而不是一個點擊式彈出窗口，是否有一些'bootstrap'懸停等效？ – Kevin

您可以通過JavaScript元素添加到現有元素的提示，使用innerHTML。然後，絕對定位此元素的工具提示和應用的opacity和visibility組合與transform和特殊時間（感謝@myfunkyside）有提示從底部淡入和顯示在您的元素。

document.getElementById('MTG_INSTR$1').innerHTML += '<span class="tooltip">\ 
 
    <div class="title">LEROY JENKINS</div>\ 
 
    Age: 45<br>\ 
 
    Location: USA\ 
 
    </span>';

* {padding:0;margin:0;} 
 
body {padding:100px 0 0 50px;} 
 

 
.PSLONGEDITBOX { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.tooltip { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    white-space: nowrap; 
 
    transform: translateX(-50%); 
 
    transition: visibility 0s .25s, opacity .25s, transform .25s; 
 
} 
 
.PSLONGEDITBOX:hover .tooltip, .tooltip:hover { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transform: translate(-50%,-100%); 
 
    transition: visibility 0s, opacity .25s, transform .25s; 
 
} 
 
.tooltip .title {border-bottom:1px dashed black;}

<span class="PSLONGEDITBOX" id="MTG_INSTR$1"> 
 
    <a href="WWW.WEBSITE.COM" target="_blank">LEROY JENKINS</a> 
 
</span>

來源

2017-07-20 21:09:07

工具提示造型？ （踢我在正確的方向）

回答

相關問題

工具提示造型？（踢我在正確的方向）