我并不完全理解触发https://valor-software.com/ngx-bootstrap/#/tooltip#triggers-custom
的确切触发器的概念例如,当我们这样做时:
triggers="mouseenter:click"
是否意味着当我们将鼠标悬停/放在那里时会显示工具提示并在点击时消失?
如果是这样,是否可以指定工具提示应该消失的两个事件。
例如,我想在我悬停在工具提示上时显示工具提示,然后在我点击它或从那里移除鼠标时使其消失。有什么想法吗?
答案 0 :(得分:4)
您可以使用一系列事件,这样的事情可能有效:triggers="mouseenter mouseleave click"
触发器 =>指定应触发的事件。支持以空格分隔的事件名称列表。
答案 1 :(得分:0)
您可以同时使用Custom triggers和Manual triggering:
hitTest
此代码在隐藏时不会通过点击触发工具提示。同样的结果是当您应用var tapIndex = 0
var keyboardIndex = 1
var keyboards = [Keyboard]()
var masterKeyboard: Keyboard!
var masterKeys = [Key]()
var masterHighlightKey = Int()
var chordCount = 0
var chordBorders = [CAShapeLayer]()
var masterChordBorders = [CAShapeLayer]()
var chordBorderColors: [UIColor] = [darkerYellow, lightPurple, darkerGreen, .orange, darkerBlue]
let engine = AudioEngine(waveform1: AKTable(.sawtooth), waveform2: AKTable(.square))
@objc func handleTap(_ recognizer: UILongPressGestureRecognizer) {
let tapLocation = recognizer.location(in: recognizer.view)
var key: Key!
var tag = Int()
if recognizer.state == .began {
print(tapLocation)
}
if tapIndex != -1 {
for layer in masterKeyboard.keys {
if layer.hitTest(tapLocation) != nil {
key = layer
tag = key.tag
break
}
}
if key != nil {
let digits = tag.digits
var myTagString = String(tag)
var myTagCount = tag.digitsCount
var myKeyboardTag = Int()
if myTagCount <= 3 {
myKeyboardTag = tag.digits[0] - 1
} else {
myKeyboardTag = "\(digits[0])\(digits[1])".int! - 1
}
let myKeyboard = self.keyboards[myKeyboardTag]
let myCount = self.keyboards[myKeyboardTag].keys.count
let myKeys = self.keyboards[myKeyboardTag].keys
myTagString.remove(at: myTagString.startIndex)
var myTag = Int()
if myKeyboard.tag < 1000 {
myTag = myTagString.int!
// print("myTag is \(myTag)")
} else {
var length = Int()
if myTagString.count < 5 {
length = 1
} else {
length = 2
}
myTag = myTagString.slicing(from: 3, length: length)!.int!
}
let unison = 0, min2nd = 1, maj2nd = 2, min3rd = 3, maj3rd = 4, P4th = 5, tritone = 6, P5th = 7, min6th = 8, maj6th = 9, min7th = 10, maj7th = 11, octave = 12
let simpleIntervals = [unison, min2nd, maj2nd, min3rd, maj3rd, P4th, tritone, P5th, min6th, maj6th, min7th, maj7th, octave]
// -1: notes off, 0: single notes, 1: major triads, 2: minor triads, 3: aug triads, 4: dim triads, 5: sus4 triad, 6: sus2 triad
let chordInversionOuterBounds = [1: [8, 9, 10], 2: [8, 10, 9], 3: [9, 9, 9], 4: [7, 10, 10], 5: [8, 8, 11], 6: [8, 11, 8]]
let chordUpperOffsets = [1: [8, 5], 2: [8, 4], 3: [9, 5], 4: [7, 4], 5: [8, 6], 6: [8, 3]]
let chordInversions = [1: [4, 7, 5, 8], 2: [3, 7, 5, 9], 3: [4, 8, 4, 8], 4: [3, 6, 6, 9], 5: [5, 7, 5, 7], 6: [2, 7, 5, 10]]
let myRoot = myKeys[myTag]
let midiRootOffset = myKeyboard.startingPitch + myTag + 21
let myRootMidiNote = MIDINoteNumber(midiRootOffset)
var my3rd = Key()
var my3rdMidiNote = MIDINoteNumber()
var my5th = Key()
var my5thMidiNote = MIDINoteNumber()
func toggleChordShape(triadType: Int, addRemove: Bool) {
let rootPosOffset = chordUpperOffsets[triadType]![0]
let firstInvOffset = chordUpperOffsets[triadType]![1]
let chord = chordInversions[triadType]
let myChordInversionOuterBounds = chordInversionOuterBounds[triadType]!.sorted()
func set3rdAnd5th() {
if myTag <= myCount - rootPosOffset {
my3rd = myKeys[myTag + chord![0]]
my5th = myKeys[myTag + chord![1]]
my3rdMidiNote = MIDINoteNumber(midiRootOffset + chord![0])
my5thMidiNote = MIDINoteNumber(midiRootOffset + chord![1])
} else if myTag > myCount - rootPosOffset && myTag <= myCount - firstInvOffset {
my3rd = myKeys[myTag + chord![0]]
my5th = myKeys[myTag - chord![2]]
my3rdMidiNote = MIDINoteNumber(midiRootOffset + chord![0])
my5thMidiNote = MIDINoteNumber(midiRootOffset - chord![2])
} else {
my3rd = myKeys[myTag - chord![3]]
my5th = myKeys[myTag - chord![2]]
my3rdMidiNote = MIDINoteNumber(midiRootOffset - chord![3])
my5thMidiNote = MIDINoteNumber(midiRootOffset - chord![2])
}
}
// addRemove == true, highlight; addRemove == false, remove highlights
if addRemove {
highlightKeys(myKey: myRoot, myRoot: myRoot, highlightColor: keyHighlightColor, doHighlight: true)
myRoot.playCount += 1
if myCount - myChordInversionOuterBounds[2] > 0 {
set3rdAnd5th()
my3rd.playCount += 1
my5th.playCount += 1
highlightKeys(myKey: my3rd, myRoot: myRoot, highlightColor: secondKeyHighlightColor, doHighlight: true)
highlightKeys(myKey: my5th, myRoot: myRoot, highlightColor: secondKeyHighlightColor, doHighlight: true)
}
} else {
highlightKeys(myKey: myRoot, myRoot: myRoot, highlightColor: keyHighlightColor, doHighlight: false)
myRoot.playCount -= 1
if myCount - myChordInversionOuterBounds[2] > 0 {
set3rdAnd5th()
my3rd.playCount -= 1
my5th.playCount -= 1
highlightKeys(myKey: my3rd, myRoot: myRoot, highlightColor: secondKeyHighlightColor, doHighlight: false)
highlightKeys(myKey: my5th, myRoot: myRoot, highlightColor: secondKeyHighlightColor, doHighlight: false)
}
}
}
if recognizer.state == .began {
if !myRoot.holding {
engine.noteOn(note: myRootMidiNote, bank: 1)
myRoot.holding = true
}
if tapIndex == 0 {
myRoot.playCount += 1
highlightKeys(myKey: myRoot, myRoot: myRoot, highlightColor: keyHighlightColor, doHighlight: true)
} else if tapIndex > 0 {
toggleChordShape(triadType: tapIndex, addRemove: true)
engine.noteOn(note: my3rdMidiNote, bank: 1)
engine.noteOn(note: my5thMidiNote, bank: 1)
}
myRoot.isPlaying = true
}
if recognizer.state == .ended {
func ifNotHolding(note: Key, midiNote: MIDINoteNumber) {
if !note.holding {
engine.noteOff(note: midiNote, bank: 1)
}
}
myRoot.holding = false
if myRoot.playCount == 1 {
engine.noteOff(note: myRootMidiNote, bank: 1)
}
if tapIndex == 0 {
highlightKeys(myKey: myRoot, myRoot: myRoot, highlightColor: keyHighlightColor, doHighlight: false)
myRoot.playCount -= 1
} else if tapIndex > 0 {
toggleChordShape(triadType: tapIndex, addRemove: false)
ifNotHolding(note: my3rd, midiNote: my3rdMidiNote)
ifNotHolding(note: my5th, midiNote: my5thMidiNote)
} else {
print("Error!")
}
myRoot.isPlaying = false
}
if recognizer.state == .cancelled {
for (index, key) in myKeys.enumerated() {
cancelAll(key: key, midiNote: MIDINoteNumber(myKeyboard.startingPitch + index + 21), bank: 1)
}
}
}
}
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
let screenWidth = view.height
let screenHeight = view.width
func addKeyboard(initialKey: Int, startingOctave: Int, numberOfKeys: Int, highlightLockKey: Int) {
let myKeyboard = Keyboard(initialKey: initialKey, startingOctave: startingOctave, numberOfKeys: numberOfKeys)
myKeyboard.highlightKey = highlightLockKey
func tagAppendAndSort() {
myKeyboard.tag = keyboardIndex
// print(myKeyboard.tag)
if keyboards.count < 8 {
keyboardIndex += 1
} else if keyboards.count == 8 {
keyboardIndex += 991
} else {
keyboardIndex += 101
}
if highlightLockKey >= 0 {
masterKeyboard = myKeyboard
masterKeyboard.addKeys(highlightLockKey: highlightLockKey)
keyboards.append(masterKeyboard)
backgroundView.addSubview(masterKeyboard)
} else {
myKeyboard.addKeys(highlightLockKey: highlightLockKey)
keyboards.append(myKeyboard)
backgroundView.addSubview(myKeyboard)
}
}
tagAppendAndSort()
}
view.addSubview(backgroundView)
backgroundView.frame = CGRect(x: 0.0, y: 0.0, width: screenWidth, height: screenHeight)
// backgroundView.backgroundColor = .gray
view.sendSubview(toBack: backgroundView)
addKeyboard(initialKey: 4, startingOctave: 2, numberOfKeys: 37, highlightLockKey: 12)
// bottom keyboard
masterKeyboard.frame = CGRect(x: 0, y: screenHeight - 91 / masterKeyboard.myKeyboardWidthMod * screenWidth, width: screenWidth, height: 91 / masterKeyboard.myKeyboardWidthMod * screenWidth)
masterKeyboard.setKeyDimensionsAndSpecs(keys: masterKeyboard.keys, screenWidth: screenWidth)
masterKeyboard.isUserInteractionEnabled = true
let longPressGR = UILongPressGestureRecognizer()
longPressGR.minimumPressDuration = 0
longPressGR.delegate = masterKeyboard
longPressGR.addTarget(self, action: #selector(handleTap(_:)))
masterKeyboard.addGestureRecognizer(longPressGR)
}
时没有<button
tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
triggers="mouseenter:mouseleave"
#pop="bs-tooltip"
(click)="pop.hide()"
>Tooltip</button>
,但它看起来很笨拙......也许这是一个错误,但triggers="mouseenter click:mouseleave click"
没有给出这样的结果。无论如何,手动处理(click)
,您将获得相对的灵活性。
答案 2 :(得分:0)
@Nikola Gavric 接受的答案没有显示出以下问题:mouseenter
(显示工具提示)> click
(隐藏工具提示)> mouseleave
(再次显示工具提示)。
对于需要像 Gmail 菜单栏操作那样的触发器(鼠标悬停时显示工具提示并在鼠标离开或点击时消失),请使用以下
triggers="mouseenter:mouseleave mouseenter:click"