javascript - Endre hvor raskt "title"-attributtets verktøytips vises

Finnes det en måte å endre hvor raskt verktøytipset fra et elements "title"-attributt vises? Jeg skulle ønske at verktøytipset dukket opp umiddelbart, men det ser ut til at det tar noen sekunder før det vises.

Svar #1

Nei, det er ingen måte. title-attributtet er implementert på en nettleseravhengig måte. For eksempel husker jeg forskjeller mellom IE og FF når man bruker \r\n inni det.

Mozillas dokumentasjon forklarer begrensningene og funksjonaliteten godt.

Hvis du ønsker tilpasning, kan du ta en titt på tredjeparts-plugins som qTip2, som etterligner det ved å bruke divs og slikt og gir deg full kontroll.

Svar #2

Dessverre finnes det ingen måte å gjøre dette på ennå,

så jeg bruker følgende metoder for å hjelpe. (Ingen avhengigheter kreves)

<style>
  [title] {
    position: relative;
  }

  [title]:after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: 100%; /* put it on the top */
    background-color: yellow;
    width: max-content;
    opacity: 0;
    -webkit-transition: opacity 0.75s ease-in-out; /* 👈 Change the time to meet your requirements. */
  }

  [title]:hover:after {
    opacity: 1;
  }
</style>

<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" title="hello world">my div</div>
<button title="for debug">button</button>

Hvis du ikke vil at tittelen skal kollidere med det, kan du bruke data-* w3school.data-* for eksempel.

<style>
  [data-tooltip] {
    position: relative;
  }

  [data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 100%; /* put it on the top */
    background-color: yellow;
    width: max-content;
    opacity: 0;
    -webkit-transition: opacity 0.75s ease-in-out;
  }

  [data-tooltip]:hover:after {
    opacity: 1;
  }

  div[data-tooltip]:after {
    left: 5px!important;
  }
</style>

<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" data-tooltip="hello world">my div</div>
<button data-tooltip="for debug">button</button>
<button title="for debug">title only</button>
<button data-tooltip="my tool tip msg" title="my title msg">title and tooltip</button>

lenken nedenfor kan også hjelpe deg.

  • fade inn og ut på enkel CSS-verktøytips

Svar #3

Du kan bruke jqueryUI som foreslått. Et eksempel på å kontrollere varigheten på show-egenskapen:

$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } });

Svar #4

Jquery UI verktøytips er ekstremt enkelt og tilpassbart: Bare last ned eller inkluder jquery UI på siden din.

Hvis du vil at alle verktøytipsene på siden din skal vises umiddelbart når du holder musen over, bruk bare dette:

$(document).tooltip({show: null});

Merk at dette gjelder alle elementer som har et 'title'-attributt. Du kan endre velgeren for å påvirke kun en klasse, og sette tilpasset hastighet eller effekt:

$('.yourClass').tooltip({show: {effect:"none", delay:0}});

Relaterte artikler