#javascript #jquery #css #html-table #sticky
Вопрос:
Я создал таблицу HTML со строкой заголовка, которая содержит всплывающие подсказки. К сожалению, всплывающие подсказки отключаются, когда я прокручиваю таблицу вниз. Как мне это исправить? Кроме того, они должны быть отзывчивыми, но появляться только вверху, а не там, где это оптимально.
Кроме того, я хочу, чтобы эта строка заголовка оставалась липкой (также на мобильных устройствах), чтобы, когда люди прокручивают, заголовок всегда был виден.
Вот мой HTML:
lt;table class=my_table border="1" cellpadding="2" cellspacing="1" style="width:100%;"gt; lt;theadgt; lt;trgt; lt;th height="42" rowspan="2" style="text-align: center; vertical-align: middle;" width="164"gt; lt;divgt;lt;stronggt;lt;span style="color:#000000;"gt;Financial Productlt;/spangt;lt;/stronggt;lt;/divgt; lt;/thgt; lt;th rowspan="2" style="text-align: center; vertical-align: middle;" width="149"gt;lt;stronggt;lt;span style="color:#000000;"gt;lt;abbr rel="tooltip" title="A best-case scenario is the optimal outcome. It helps to assess the potential profit you can make by investing in the product."gt;Best Caselt;/abbrgt;lt;/spangt;lt;/stronggt;lt;/thgt; lt;th rowspan="2" style="text-align: center; vertical-align: middle;" width="112"gt;lt;stronggt;lt;span style="color:#000000;"gt;lt;abbr rel="tooltip" title="A worst-case scenario is the least favourable outcome. It helps to assess the potential loss you can make by investing in the product."gt;Worst Caselt;/abbrgt;lt;/spangt;lt;/stronggt;lt;/thgt; lt;th rowspan="2" style="text-align: center; vertical-align: middle;" width="150"gt;lt;stronggt;lt;span style="color:#000000;"gt;lt;abbr rel="tooltip" title="Prices as of right now."gt;Prices (in $)lt;/abbrgt;lt;/spangt;lt;/stronggt;lt;/thgt; lt;th rowspan="2" style="text-align: center;" width="120"gt;lt;stronggt;lt;span style="color:#229954;"gt;lt;abbr rel="tooltip" title="For instance, the underlying can be one or multiple company shares, an index such as the German DAX®, a precious metal such as gold, or a commodity such as oil."gt;Underlyingslt;/abbrgt;lt;/spangt;lt;/stronggt;lt;/thgt; lt;th rowspan="2" style="text-align: center; vertical-align: middle;" width="71"gt;lt;stronggt;lt;span style="color:#229954;"gt;lt;abbr rel="tooltip" title="A price cheaper than the market rate. For instance, if the market rate is $50 and the product trades at $45, then it trades at a discount."gt;Discountlt;/abbrgt;lt;/spangt;lt;/stronggt;lt;/thgt; lt;th rowspan="2" style="text-align: center; vertical-align: middle;" width="100"gt;lt;stronggt;lt;span style="color:#229954;"gt;lt;abbr rel="tooltip" title="A barrier event (% of stock price) works as protection. For instance, if the stock price is $50 and the barrier event is 80%, then the initial investment is paid back only if the stock price never touched $40 (80% x $50). If that price is reached until maturity, the payoff depends on the performance of the worst performing underlying."gt;Barrierlt;br /gt; Eventlt;/abbrgt;lt;/spangt;lt;/stronggt;lt;/thgt; lt;th rowspan="2" style="text-align: center; vertical-align: middle;" width="67"gt;lt;stronggt;lt;span style="color:#229954;"gt;lt;abbr rel="tooltip" title="Usually, when structured products trade at a discount, their upside (the potential gain) is capped. For instance, if they trade at $45 instead of $50 (10% discount), the maximum payout is limited to $56."gt;Capped (in $)lt;/abbrgt;lt;/spangt;lt;/stronggt;lt;/thgt; lt;th rowspan="2" style="text-align: center; vertical-align: middle;" width="99"gt;lt;stronggt;lt;span style="color:#229954;"gt;lt;abbr rel="tooltip" title="Structured products also have participation rates that describe an investor's share in the return of the underlying assets. Participation rates below 100% mean that the investor will realize a return that is less than the return on the underlying assets."gt;Participationlt;/abbrgt;lt;/spangt;lt;/stronggt;lt;/thgt; lt;th rowspan="2" style="text-align: center; vertical-align: middle;" width="157"gt;lt;stronggt;lt;span style="color:#229954;"gt;lt;abbr rel="tooltip" title="A coupon payment is guaranteed unless in brackets. Then, it is only paid out if the barrier event did not take place. A coupon payment is the annual interest rate you receive."gt;(Conditional) Couponlt;/abbrgt;lt;/spangt;lt;/stronggt;lt;/thgt; lt;th rowspan="2" style="text-align: center;" width="100"gt;lt;stronggt;lt;span style="color:#229954;"gt;lt;abbr rel="tooltip" title="A bonus is paid only if the barrier event is not reached. It can be described as a one-time payment you receive."gt;Bonus (in $)lt;/abbrgt;lt;/spangt;lt;/stronggt;lt;/thgt; lt;th rowspan="2" style="text-align: center;" width="135"gt;lt;stronggt;lt;span style="color:#229954;"gt;lt;abbr rel="tooltip" title="Some Structured Products offer 100% protection of the initial investment and others offer partial or no capital protection. In case your capital is 100% protected, then you get back all your invested money if the underlying is performing poorly."gt;Capital Protectionlt;/abbrgt;lt;/spangt;lt;/stronggt;lt;/thgt; lt;/trgt; lt;tr style="text-align: center;"gt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;Stock 1lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;6.25%lt;/tdgt; lt;td style="text-align: center;"gt;-10.51%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;Stock 2lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;3.73%lt;/tdgt; lt;td style="text-align: center;"gt;-13.60%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;Stock 3lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;11.36%lt;/tdgt; lt;td style="text-align: center;"gt;-7.28%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;Stock 4lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;6.51%lt;/tdgt; lt;td style="text-align: center;"gt;-13.61%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;Stock 5lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;4.27%lt;/tdgt; lt;td style="text-align: center;"gt;-23.30%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;Stock 6lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;5.21%lt;/tdgt; lt;td style="text-align: center;"gt;-22.33%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;Stock 7lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;9.66%lt;/tdgt; lt;td style="text-align: center;"gt;-20.19%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;Stock 8lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;1.78%lt;/tdgt; lt;td style="text-align: center;"gt;-31.08%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;Stock 9lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;18.64%lt;/tdgt; lt;td style="text-align: center;"gt;-8.63%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;Stock 10lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;14.85%lt;/tdgt; lt;td style="text-align: center;"gt;-14.40%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;SP1lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;5.65%lt;/tdgt; lt;td style="text-align: center;"gt;-14.00%lt;/tdgt; lt;td style="text-align: center;"gt;45lt;/tdgt; lt;td style="text-align: center;"gt;1lt;/tdgt; lt;td style="text-align: center;"gt;Yeslt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;56lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;SP2lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;13.20%lt;/tdgt; lt;td style="text-align: center;"gt;-37.39%lt;/tdgt; lt;td style="text-align: center;"gt;30lt;/tdgt; lt;td style="text-align: center;"gt;1lt;/tdgt; lt;td style="text-align: center;"gt;Yeslt;/tdgt; lt;td style="text-align: center;"gt;110%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;SP3lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;5.68%lt;/tdgt; lt;td style="text-align: center;"gt;-15.92%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;1lt;/tdgt; lt;td style="text-align: center;"gt;Nolt;/tdgt; lt;td style="text-align: center;"gt;85%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;5.8%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;SP4lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;12.61%lt;/tdgt; lt;td style="text-align: center;"gt;-11.32%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;1lt;/tdgt; lt;td style="text-align: center;"gt;Nolt;/tdgt; lt;td style="text-align: center;"gt;53%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;lt;span style="font-size:11px;"gt;amp;nbsp;amp;nbsp;lt;/spangt;50lt;span style="font-size:11px;"gt;amp;nbsp;lt;/spangt;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;SP5lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;8.32%lt;/tdgt; lt;td style="text-align: center;"gt;-23.91%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;2lt;/tdgt; lt;td style="text-align: center;"gt;Nolt;/tdgt; lt;td style="text-align: center;"gt;88%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;9%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;SP6lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;8.90%lt;/tdgt; lt;td style="text-align: center;"gt;-35.00%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;2lt;/tdgt; lt;td style="text-align: center;"gt;Nolt;/tdgt; lt;td style="text-align: center;"gt;85%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;9.12%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;SP7lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;11.59%lt;/tdgt; lt;td style="text-align: center;"gt;-53.77%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;3lt;/tdgt; lt;td style="text-align: center;"gt;Nolt;/tdgt; lt;td style="text-align: center;"gt;60%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;16%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;SP8lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;16.47%lt;/tdgt; lt;td style="text-align: center;"gt;-42.95%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;3lt;/tdgt; lt;td style="text-align: center;"gt;Nolt;/tdgt; lt;td style="text-align: center;"gt;55%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;6.40%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;SP9lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;4.65%lt;/tdgt; lt;td style="text-align: center;"gt;-8.77%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;4lt;/tdgt; lt;td style="text-align: center;"gt;Nolt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;100%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;95%lt;/tdgt; lt;/trgt; lt;trgt; lt;td height="21" style="text-align: center;"gt;lt;stronggt;SP10lt;/stronggt;lt;/tdgt; lt;td style="text-align: center;"gt;19.32%lt;/tdgt; lt;td style="text-align: center;"gt;-36.32%lt;/tdgt; lt;td style="text-align: center;"gt;50lt;/tdgt; lt;td style="text-align: center;"gt;5lt;/tdgt; lt;td style="text-align: center;"gt;Nolt;/tdgt; lt;td style="text-align: center;"gt;85%lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;100%lt;/tdgt; lt;td style="text-align: center;"gt;0.6% ( 2.3%)lt;/tdgt; lt;td style="text-align: center;"gt;amp;nbsp;lt;/tdgt; lt;td style="text-align: center;"gt;100%lt;/tdgt; lt;/trgt; lt;/theadgt; lt;/tablegt; lt;div style="text-align: center;"gt;amp;nbsp;lt;/divgt; lt;/divgt; Вот мой CSS-код:
#tooltip { text-align: center; color: #fff; background: #111; position: absolute; z-index: 100; padding: 15px; width: max-content; max-width: 200px; } #tooltip:after /* triangle decoration */ { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #111; content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; } #tooltip.top:after { border-top-color: transparent; border-bottom: 10px solid #111; top: -20px; bottom: auto; } #tooltip.left:after { left: 10px; margin: 0; } #tooltip.right:after { right: 10px; left: auto; margin: 0; } table.my_table { font-size: 11px; border-collapse: collapse; border: solid 2px; width: 100%; } table.my_table td, table.my_table th { padding: 2px; text-align: center; margin: 0; border: solid 1px; } table.my_table th { background-color: #DCDCDC; border: solid 1px; border-bottom: solid 2px; position: -webkit-sticky; position: sticky; top: 0; z-index: 2; } А вот мой JS-код:
Qualtrics.SurveyEngine.addOnReady(function() { var targets = jQuery( '[rel~=tooltip]' ), target = false, tooltip = false, title = false; targets.bind( 'mouseenter', function() { target = jQuery( this ); tip = target.attr( 'title' ); tooltip = jQuery( 'lt;div id="tooltip"gt;lt;/divgt;' ); if( !tip || tip == '' ) return false; target.removeAttr( 'title' ); tooltip.css( 'opacity', 0 ) .html( tip ) .appendTo( 'body' ); var init_tooltip = function() { if( jQuery( window ).width() lt; tooltip.outerWidth() * 1.5 ) tooltip.css( 'max-width', $( window ).width() / 2 ); else tooltip.css( 'max-width', 200 ); var pos_left = target.offset().left ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ), pos_top = target.offset().top - tooltip.outerHeight() - 20; if( pos_left lt; 0 ) { pos_left = target.offset().left target.outerWidth() / 2 - 20; tooltip.addClass( 'left' ); } else tooltip.removeClass( 'left' ); if( pos_left tooltip.outerWidth() gt; jQuery( window ).width() ) { pos_left = target.offset().left - tooltip.outerWidth() target.outerWidth() / 2 20; tooltip.addClass( 'right' ); } else tooltip.removeClass( 'right' ); if( pos_top lt; 0 ) { var pos_top = target.offset().top target.outerHeight(); tooltip.addClass( 'top' ); } else tooltip.removeClass( 'top' ); tooltip.css( { left: pos_left, top: pos_top } ) .animate( { top: ' =10', opacity: 1 }, 50 ); }; init_tooltip(); jQuery( window ).resize( init_tooltip ); var remove_tooltip = function() { tooltip.animate( { top: '-=10', opacity: 0 }, 50, function() { jQuery( this ).remove(); }); target.attr( 'title', tip ); }; target.bind( 'mouseleave', remove_tooltip ); tooltip.bind( 'click', remove_tooltip ); }); }); Комментарии:
1. Где HTML — код для таблицы?
2. Извините, я добавлю это!